首先,要实现地图上按照一定距离(米)画圆,需要使用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"}});