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

Question

正如您在我的 Mapbox GL JS 地图上的上图所见，我试图将 'W' 标记径向定位在中心的小“2”标记周围，但我不知道如何定位实现这一目标。

您可以查看下面附上的 fiddle 以更好地理解这一点。

但本质上，有一个数组 w_markers_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() 以某种方式使其出现在一个 wave 中（我丢失了 tbh）但它也没有成功。

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

#geocoder-container > div {
    min-width:50%;
    margin-left:25%;
}
.mapboxgl-ctrl-geocoder {
 display: none;
}

.mapboxgl-ctrl-logo, .mapboxgl-ctrl-bottom-right {
 display: none !important;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Set a point after Geocoder result</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />

 <div id='map'></div>


 <script>


 var center_marker;
  
 mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
 var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
     center: [127.017613, 37.591672],
     maxBounds: [
      [126.972368, 37.572532], // Southwest coordinates
      [127.073682, 37.629226]  // Northeast coordinates
     ], // Sets bounds as max
     zoom: 14.2,
     minZoom: 14.2
     // pitch: 60, // pitch in degrees
     // bearing: -60, // bearing in degrees
 });

 

 // After the map style has loaded on the page, add a source layer and default
 // styling for a single point.
 map.on('load', function() {

     map.addSource('single-point', {
         "type": "geojson",
         "data": {
             "type": "FeatureCollection",
             "features": []
         }
     });

  center_marker = {
      "type": "FeatureCollection",
      "features": [
       {
           "type": "Feature",
           "properties": {
               "message": "Marker 0",
           },
           "geometry": {
               "type": "Point",
               "coordinates": [127.017613, 37.591672],
           }
       },
         ]
  };


     // create center marker and add to map
     var el = document.createElement('div');
     el.className = 'marker_places';
     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';

     // add center marker to map
     new mapboxgl.Marker(el)
         .setLngLat(center_marker.features[0].geometry.coordinates)
         .addTo(map);


     /******/


     var w_markers_arr = ["w_marker1", "w_marker2", "w_marker3", "w_marker4", "w_marker5", "w_marker6",]

  var w_markers = {
      "type": "FeatureCollection",
      "features": []
  };


  // add w markers
  
  for (var i = 0; i < w_markers_arr.length; i++) {

   var w_markers_feature_toadd = {
                  "type": "Feature",
                  "properties": {
                      "message": "Work "+i,
                      "index": i
                  },
                  "geometry": {
                      "type": "Point",
                      "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) 
                      ]
                  }
              }


   w_markers.features.push(w_markers_feature_toadd);

      // create marker ele and add to map
      var el = document.createElement('div');
      el.className = 'marker_floaters';
      el.dataset.index = i;
      el.style.backgroundImage = 'url(https://www.fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_works.svg)';
      el.style.width = '35px';
      el.style.height = '35px';

      // add marker to map
      new mapboxgl.Marker(el)
          .setLngLat(w_markers_feature_toadd.geometry.coordinates)
          .addTo(map);

  }



 });





 </script>

</body>
</html>

Answer 1

用 latitudes/longitudes 画一个圆可能会很棘手。

库Turf.js提供了一些非常有用的工具，例如circle其中returns圆心和半径：

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] 将包含每个标记的坐标（+ 最后一个与第一个相同的标记）。

这是一个工作演示：https://codepen.io/eddydg/pen/JmJbmQ?editors=1000

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

Mapbox GL js - Add multiple markers radially around a given coordinate

javascript

markers

mapbox

mapbox-gl-js