mapbox-gl提供了一個畫圓的圖層方式，圖層的類型設置成circle，通過設置circle-radius，實現(xiàn)圓的大小變化，不過這個參數(shù)的單位是像素（pixels），在地圖縮放的時候，圓一直是像素尺寸，在地圖上覆蓋的空間面積也不同，不能滿足按照地理距離單位的變化。
mapbox-gl圓的屬性設置：

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle

第一種方式：要實現(xiàn)地圖上按照一定距離（米）畫圓，需要使用mapbox-gl的表達式功能（expressions），首先找到墨卡托坐標距離和屏幕上的像素換算公式，如下：

根據(jù)函數(shù)，傳入圓的地理距離和圓中心點所在的緯度坐標，計算地圖縮放到20級時，圓在屏幕上的像素尺寸：

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

在地圖上添加圓的時候，根據(jù)計算的像素尺寸，通過mapbox-gl的表達式設置，實現(xiàn)隨著地圖縮放，圓的尺寸變化：

//添加數(shù)據(jù)源

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",//數(shù)據(jù)源id設置

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

?//關(guān)鍵處，設置圓的半徑隨地圖縮放而變化"

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庫，根據(jù)中心點坐標，按照距離，設定圓周上點的個數(shù)，根據(jù)地理距離，計算成串坐標，組合成polygon的形式進行加載，具體的參見turf.js類庫api：

http://turfjs.org/

mapbox-gl開發(fā)是講述如何從基礎(chǔ)到實際應用進行地圖開發(fā)的教程，不定時進行持續(xù)進行更新，如有疑問，公眾號留言進行討論。

https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486202&idx=1&sn=b9952e5d6125b21464d6d27dff80a169&chksm=fc8baac8cbfc23def27f958d2f63d84106e98232eea5b13334dfb79007b6dc80a7c7e0bfb5c5&token=635212041&lang=zh_CN#rd