Javascript Mapbox GL js-围绕给定坐标径向添加多个标记

正如你可以从我的Mapbox GL JS地图上面的图像中看到的，我正试图将“W”标记径向定位在中心的小“2”标记周围，但我一直在想如何实现这一点

你可以看看我下面附的小提琴，更好地理解这一点

但本质上，有一个数组

w_markers\u arr

，对于每个数组内容，我将向地图添加一个标记，用以下代码将其与中心标记偏移一点：

"coordinates": [
    center_marker.features[0].geometry.coordinates[0] - (w_markers_arr.length * 0.0006) + (i * 0.002),
    center_marker.features[0].geometry.coordinates[1] - 0.001 - (Math.sin(i * 0.001) * 0.5) 
]

我试着用

Math.PI

，

Math.PI/2

，让它出现在中间标记上，但没有成功

在我所附的当前代码中，我尝试使用

Math.Sin（）

以某种方式使它出现在波浪中（我丢失了tbh），但也没有成功

希望有人能给我指出正确的方向。非常感谢您的帮助

#地理编码器容器>div{
最小宽度：50%；
左边缘：25%；
}
.mapboxgl ctrl地理编码器{
显示：无；
}
.mapboxgl ctrl徽标，.mapboxgl ctrl右下角{
显示：无！重要；
}

在地理编码器结果之后设置一个点
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
var中心标记；
mapboxgl.accessToken='pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
中间：[127.017613,37.591672]，
最大界限：[
[126.972368，37.572532]，//西南坐标
[127.073682，37.629226]//东北坐标
]，//将边界设置为最大值
缩放：14.2，
最小缩放：14.2
//节距：60，//节距单位为度
//轴承：-60，//以度为单位的轴承
});
//在页面上加载地图样式后，添加源图层和默认图层
//单点的样式设置。
map.on（'load'，function（））{
map.addSource（'单点'{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“功能”：[]
}
});
中心标记={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“消息”：“标记0”，
},
“几何学”：{
“类型”：“点”，
“坐标”：[127.017613,37.591672]，
}
},
]
};
//创建中心标记并添加到地图
var el=document.createElement（'div'）；
el.className='标记位置'；
el.dataset.index=0；
el.style.backgroundImage='url(http://fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_1.svg)';
el.style.width='25px'；
el.style.height='25px'；
//将中心标记添加到地图
新mapboxgl.标记（el）
.setLngLat（中心标记。特征[0]。几何体。坐标）
.addTo（地图）；
/******/
变量w_markers_arr=[“w_marker1”、“w_marker2”、“w_marker3”、“w_marker4”、“w_marker5”、“w_marker6”，]
变量w_标记={
“类型”：“FeatureCollection”，
“功能”：[]
};
//添加w标记
对于（变量i=0；i

用纬度/经度做一个圆圈可能非常棘手

该库提供了一些非常有用的工具，例如

circle

，它从圆心和半径返回一个圆：

var radius = 0.2;
var options = { steps: w_markers_arr.length, units: 'kilometers' };
var circleCenter = center_marker.features[0].geometry.coordinates;

var circle = turf.circle(circleCenter, radius, options);
var circleCoordinates = circle.geometry.coordinates[0];

通过将步数设置为标记数，

circleCoordinates[i]

将包含每个标记的坐标（+最后一个标记与第一个标记相同）

---

这是一个有效的演示：

供任何想寻找替代答案的人使用。我还成功地使用此处演示的方法破解了另一个解决方案[12月9日编辑]：