mapbox-gl画圆注意事项

首先，要实现地图上按照一定距离（米）画圆，需要使用mapbox-gl的表达式功能（expressions），首先找到墨卡托坐标距离和屏幕上的像素换算公式

根据函数，传入圆的地理距离和圆中心点所在的纬度坐标，计算地图缩放到20级时，圆在屏幕上的像素尺寸

 

function metersToPixelsAtMaxZoom(meters, latitude) {return meters / 0.075 / Math.cos(latitude * Math.PI / 180)}

 circle-radius 那里用stops

//添加数据源

map.addSource("circle_source",

{

"type": "geojson",

"data": {

"type": "FeatureCollection",

"features": [

{"type": "Feature","geometry": {"type": "Point","coordinates": [110.132, 21.768]} }]}});//添加圆的图层

map.addLayer({

"id": "circle_layer",//类型设置

"type": "circle",//数据源id设置

"source": "circle_source","paint": {  

 //设置圆的半径随地图缩放而变化"

circle-radius": {stops: [ [0, 0],[20, pixelRadius(jsonData.feature[0].properties.radius,jsonData.feature[0].geometry.coordinates[1])]],base: 2}, 

"circle-opacity": 0.3,

"circle-color": "#ffae000"}});