Open xkm0228 opened 4 years ago
在mapbox.gl上加自定义图层 deck.gl 的TripsLayer 后地图上无任何显示,也无任何报错信息。 试过加上另外一个deck.gl 的图层 ScatterplotLayer 后,地图上有预期的图案显示。 不知道是什么原因,求大神帮助。ps(底图加载是天地图。应该也没有什么关系吧)
初始化地图 以下是加入deck.gl 的 ScatterplotLayer 图层 ,显示正常 var { MapboxLayer, ScatterplotLayer, TripsLayer } = deck; var data = [{ name: 'Colma (COLM)', code: 'CM', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [116.72493811591954, 23.276269806678997] }] const myDeckLayer = new MapboxLayer({ id: 'my-sc', type: ScatterplotLayer, data, opacity: 0.8, stroked: true, filled: true, radiusScale: 6, radiusMinPixels: 1, radiusMaxPixels: 10, lineWidthMinPixels: 1, getPosition: d => d.coordinates, getRadius: d => Math.sqrt(d.exits), getFillColor: d => [255, 140, 0], getLineColor: d => [0, 0, 0], onHover: ({ object, x, y }) => { const tooltip =${object.name}\n${object.address}; /* Update tooltip http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object */ } }) 以下是加入TripsLayer 图层,无任何显示 ` var pathData = [{ "waypoints": [{ "coordinates": [116.72408491373062, 23.27498942613602], "timestamp": 1554772579000 }, { "coordinates": [116.72482520341873, 23.274109661579136], "timestamp": 1554772579009 }, { "coordinates": [116.72558158636093, 23.274377882480625], "timestamp": 1554772579054 }, { "coordinates": [116.72556549310684, 23.274946510791782], "timestamp": 1554772579092 }, { "coordinates": [116.72519534826279, 23.27551513910294], "timestamp": 1554772579345 }] }]
var { MapboxLayer, ScatterplotLayer, TripsLayer } = deck; var data = [{ name: 'Colma (COLM)', code: 'CM', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [116.72493811591954, 23.276269806678997] }] const myDeckLayer = new MapboxLayer({ id: 'my-sc', type: ScatterplotLayer, data, opacity: 0.8, stroked: true, filled: true, radiusScale: 6, radiusMinPixels: 1, radiusMaxPixels: 10, lineWidthMinPixels: 1, getPosition: d => d.coordinates, getRadius: d => Math.sqrt(d.exits), getFillColor: d => [255, 140, 0], getLineColor: d => [0, 0, 0], onHover: ({ object, x, y }) => { const tooltip =
; /* Update tooltip http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object */ } })
var myPathAnimateTime = 100; const myPathLayer = new MapboxLayer({ id: 'my-Path', type: TripsLayer, pathData, getPath: d => d.waypoints.map(p => p.coordinates), // deduct start timestamp from each data point to avoid overflow getTimestamps: d => d.waypoints.map(p => p.timestamp - 1554772579000), getColor: [253, 128, 93], opacity: 0.2, widthMinPixels: 5, rounded: true, trailLength: 200, currentTime: 100 })`
Web
我遇到的问题
在mapbox.gl上加自定义图层 deck.gl 的TripsLayer 后地图上无任何显示,也无任何报错信息。 试过加上另外一个deck.gl 的图层 ScatterplotLayer 后,地图上有预期的图案显示。 不知道是什么原因,求大神帮助。ps(底图加载是天地图。应该也没有什么关系吧)
我遇到的问题截图
初始化地图 以下是加入deck.gl 的 ScatterplotLayer 图层 ,显示正常
var { MapboxLayer, ScatterplotLayer, TripsLayer } = deck; var data = [{ name: 'Colma (COLM)', code: 'CM', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [116.72493811591954, 23.276269806678997] }] const myDeckLayer = new MapboxLayer({ id: 'my-sc', type: ScatterplotLayer, data, opacity: 0.8, stroked: true, filled: true, radiusScale: 6, radiusMinPixels: 1, radiusMaxPixels: 10, lineWidthMinPixels: 1, getPosition: d => d.coordinates, getRadius: d => Math.sqrt(d.exits), getFillColor: d => [255, 140, 0], getLineColor: d => [0, 0, 0], onHover: ({ object, x, y }) => { const tooltip =
${object.name}\n${object.address}; /* Update tooltip http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object */ } })
以下是加入TripsLayer 图层,无任何显示 ` var pathData = [{ "waypoints": [{ "coordinates": [116.72408491373062, 23.27498942613602], "timestamp": 1554772579000 }, { "coordinates": [116.72482520341873, 23.274109661579136], "timestamp": 1554772579009 }, { "coordinates": [116.72558158636093, 23.274377882480625], "timestamp": 1554772579054 }, { "coordinates": [116.72556549310684, 23.274946510791782], "timestamp": 1554772579092 }, { "coordinates": [116.72519534826279, 23.27551513910294], "timestamp": 1554772579345 }] }]该问题的类别
Web