mapbox-developer-group / Mapbox-Tech-Q-A

在提问之前请自行查看文档哦,养成好习惯:https://docs.mapbox.com/
32 stars 1 forks source link

结合deck.gl使用,TripsLayer出不来。 #50

Open xkm0228 opened 4 years ago

xkm0228 commented 4 years ago

我遇到的问题

在mapbox.gl上加自定义图层 deck.gl 的TripsLayer 后地图上无任何显示,也无任何报错信息。 试过加上另外一个deck.gl 的图层 ScatterplotLayer 后,地图上有预期的图案显示。 不知道是什么原因,求大神帮助。ps(底图加载是天地图。应该也没有什么关系吧)

我遇到的问题截图

初始化地图 image 以下是加入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 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
    })`

image

该问题的类别

Web