Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.