mapbox-gl开发：画圆的一些问题

mapbox-gl提供了一个画圆的图层方式，图层的类型设置成circle，通过设置circle-radius，实现圆的大小设置，不过这个参数的单位是像素，在地图缩放的时候，圆的大小并不变，根据地图上一定距离的效果，这个并不满足要求。
所以，在实现地图上按照一定距离（米）的圆范围，需要进行一定的变换，在mapbox-gl的讨论话题中，找到一种按照地理距离实现画圆的方式，同时，能够在地图缩放时，随着地图变化。
根据下列函数，传入圆的地理距离和圆中心点所在的纬度坐标，计算地图缩放到20级时，圆在屏幕上的像素尺寸：

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

在地图上添加圆的时候，根据计算的像素尺寸，通过mapbox-gl的expression表达式设置，实现随着地图缩放，圆的尺寸变化：

//添加数据源
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"
			}
		});

添加的圆图层就能根据地图缩放而变化：

更多文章请关注公众号查看！