Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xkm0228 opened this issue Jan 7, 2020 · 0 comments
Open

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

xkm0228 opened this issue Jan 7, 2020 · 0 comments

Comments

@xkm0228
Copy link

xkm0228 commented Jan 7, 2020

我遇到的问题

在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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant