mapbox-gl提供了一个画圆的图层方式，图层的类型设置成circle，通过设置circle-radius，实现圆的大小变化，不过这个参数的单位是像素（pixels），在地图缩放的时候，圆一直是像素尺寸，在地图上覆盖的空间面积也不同，不能满足按照地理距离单位的变化。
mapbox-gl圆的属性设置：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle
第一种方式：要实现地图上按照一定距离（米）画圆，需要使用mapbox-gl的表达式功能（expressions），首先找到墨卡托坐标距离和屏幕上的像素换算公式，如下：
根据函数，传入圆的地理距离和圆中心点所在的纬度坐标，计算地图缩放到20级时，圆在屏幕上的像素尺寸：
function metersToPixelsAtMaxZoom(meters, latitude) {
return meters / 0.075 / Math.cos(latitude * Math.PI / 180)
}
在地图上添加圆的时候，根据计算的像素尺寸，通过mapbox-gl的表达式设置，实现随着地图缩放，圆的尺寸变化：
//添加数据源
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]],
base: 2
},//设置圆的其他属性
"circle-opacity": 0.5,
"circle-stroke-width": 1,
"circle-color": "#00f",
"circle-pitch-alignment": "map"
}
});
第二种方式：使用turf.js库，根据中心点坐标，按照距离，设定圆周上点的个数，根据地理距离，计算成串坐标，组合成polygon的形式进行加载，具体的参见turf.js类库api：
http://turfjs.org/
mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486202&idx=1&sn=b9952e5d6125b21464d6d27dff80a169&chksm=fc8baac8cbfc23def27f958d2f63d84106e98232eea5b13334dfb79007b6dc80a7c7e0bfb5c5&token=7980397&lang=zh_CN#rd
