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

This article mainly introduces how to draw a circle in mapbox-gl development, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

Mapbox-gl provides a layer way to draw a circle, the type of layer is set to circle, and the size of the circle is set by setting circle-radius, but the unit of this parameter is pixels. When the map is zoomed, the size of the circle does not change. According to the effect of a certain distance on the map, this does not meet the requirements.

Therefore, in order to realize the circle range according to a certain distance (meters) on the map, we need to make a certain transformation. In the discussion topic of mapbox-gl, we can find a way to draw a circle according to the geographical distance. At the same time, when the map is zoomed out, it can change with the map.

According to the following function, pass in the geographical distance of the circle and the latitude coordinates of the center point of the circle, and calculate the pixel size of the circle on the screen when the map is zoomed to level 20:

Function metersToPixelsAtMaxZoom (meters, latitude) {

Return meters / 0.075 / Math.cos (latitude * Math.PI / 180)

}

When adding a circle to a map, according to the calculated pixel size, it is set by mapbox-gl 's expression expression to change the circle size as the map is scaled: / / add a data source.

Map.addSource ("circle_source", {

"type": "geojson"

"data": {

"type": "FeatureCollection"

"features": [{

"type": "Feature"

"geometry": {

"type": "Point"

"coordinates": [110.132, 21.768]

}

}]

}

});

/ / add a layer of the circle

Map.addLayer ({

"id": "circle_layer"

/ / Type setting

"type": "circle"

/ / data source id settings

"source": "circle_source"

"paint": {

/ / at the key point, set the radius of the circle to change with the zoom of the map

"circle-radius": {

Stops: [

[0, 0]

[20, _ pixelRadius]]

Base: 2

}

/ / set other properties of the circle

"circle-opacity": 0.5

"circle-stroke-width": 1

"circle-color": "# 00f"

"circle-pitch-alignment": "map"

}

});

The added circle layer can change according to the zoom of the map:

These are all the contents of the article "how to draw circles in mapbox-gl Development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.