How to use mapbox-gl to develop deck.gl track Map effect
This article introduces the knowledge of "how to use mapbox-gl to develop deck.gl track map effect". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
For layers that can be integrated with deck.gl in mapbox-gl, see mapbox-gl Development: integrating deck.gl, extending integration in the form of dynamic track maps using mapbox-gl 's custom layer (CustomLayer). There are also examples in echarts and deck.gl. The official effect page of https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effectdeck.gl: the sample of echarts is TripsLayer, and sometimes the reasons for the network may not be able to browse.
Https://deck.gl/examples
In the process of mapbox-gl integration:
Download the trips-v7.json of the official website and test the data. The data format is shown in the following figure, which is composed of multiple pieces of data:
Bring in the layers used by deck.gl:
Const {MapboxLayer,TripsLayer} = deck
Define a mapbox custom layer for deck.gl:
/ / define the current time, which changes to achieve the dynamic effect of the trajectory.
Var time = 100
MyDeckLayer = new MapboxLayer ({
Id: 'mydecklayer'
/ / set the layer type to track map
Type: TripsLayer
/ / use trip data
Data: tripdata
/ / get the route and time data in the data
GetPath: d = > {
Return d.path
}
GetTimestamps: d = > d.timestamps
/ / set track color, transparency, length and other information
GetColor: [253, 128, 0]
Opacity: 0.5
WidthMinPixels: 5
Rounded: true
TrailLength: 100
/ / use time variable, and then change the value of time to achieve dynamic effect.
CurrentTime: time
});
/ / mapbox-gl add layer
Map.addLayer (myDeckLayer)
/ / cycle the modification time to achieve the dynamic effect of the trajectory
Function animate () {
Time = (time+1.5) 00
MyDeckLayer.setProps ({currentTime: time})
RequestAnimationFrame (animate)
}
The effect is as follows:
This is the end of the content of "how to develop deck.gl trajectory effects with mapbox-gl". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
