mapbox-gl开发教程（十四）：画圆技巧

原创

GIS技术杂谈 2022-09-27 17:17:27 ©著作权

©著作权归作者所有：来自51CTO博客作者GIS技术杂谈的原创作品，请联系作者获取转载授权，否则将追究法律责任

--mapbox-gl是一个开源、基于webgl技术的前端地图类库--

开发教程篇十四：画圆技巧

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"
}
});