Mapbox 单击即可将圆多边形添加到地图

我希望创建一个交互式地图，用户只需单击即可放置不同大小的多边形/圆。一旦他们放置了这些形状，就需要保存这些形状，以便下次他们访问页面时能够记住用户放置这些多边形的位置

---

如何使用Mapbox在地图上绘制一个类似圆形的多边形，具有预定义的面积/大小，只需单击一次？

Mapbox中没有

圆形，任何形状都必须定义为点列表以形成多边形。。。因此，选项1将创建您自己的“圆形”多边形作为GeoJson功能，您可以将其用作图层的源。。。这是你的样品

{"geometry":{"coordinates":[[[-122.12994080132313,47.644482519898276],[-122.12990373140416,47.64449397672769],[-122.12986013420647,47.64449595450196],[-122.12982116483462,47.644490418558235],[-122.1297839964571,47.644476603480825],[-122.12975679969954,47.64445714476511],[-122.12973954095614,47.64443733202884],[-122.12973247670453,47.64440904091012],[-122.12973871662135,47.644379708121534],[-122.1297573021927,47.64435229906627],[-122.12978488013835,47.64433576206736],[-122.12980033418789,47.644325791349985],[-122.12985011085712,47.64431544969429],[-122.12989071574376,47.644316214791644],[-122.12993313243254,47.64432463813935],[-122.12996427964354,47.64434114057201],[-122.12998759690701,47.644364252993626],[-122.13000010533318,47.64438901705185],[-122.1300017490552,47.64441623463529],[-122.12999180010362,47.64444202406153],[-122.12997246871359,47.64446439674887],[-122.12994080132313,47.644482519898276]]],"type":"Polygon"},"type":"Feature","properties":{"name":"circle"}}

您可以尝试使用来了解如何手动绘制此图。这将允许创建一些预定义的“几乎完美的圆”，然后允许用户在屏幕上拖放它们

选项2将创建这些形状，即使用一个地理空间js引擎，允许您创建一些预定义的形状，包括

但是，如果您只想将圆的形状放置在一个具体的点上作为标记，用户可以拖放，选项3就在我为您创建的这个示例提琴中，它包括基于svg圆形状创建标记。显然，此形状不会缩放为基于多边形向量的贴图盒


只需定义标记的样式（来自wikipedia的图像，您需要获得自己的svg形状）


.马克{
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg');
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
光标：指针；
}

然后是相关的js代码

        mapboxgl.accessToken = 'PUT YOUR TOKEN HERE';

    var geojson = {
      'type': 'FeatureCollection',
      'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-77.032, 38.913]
          },
          'properties': {
            'title': 'Mapbox',
            'description': 'Washington, D.C.'
          }
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-122.414, 37.776]
          },
          'properties': {
            'title': 'Mapbox',
            'description': 'San Francisco, California'
          }
        }
      ]
    };

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-96, 15.8],
      zoom: 2
    });

    // add markers to map
    geojson.features.forEach(function(marker) {
      // create a HTML element for each feature
      var el = document.createElement('div');
      el.className = 'marker';

      // make a marker for each feature and add it to the map
      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(
          new mapboxgl.Popup({
            offset: 25
          }) // add popups
          .setHTML(
            '<h3>' +
            marker.properties.title +
            '</h3><p>' +
            marker.properties.description +
            '</p>'
          )
        )
        .addTo(map);
    });

mapboxgl.accessToken='将您的令牌放在这里'；
var geojson={
“类型”：“功能集合”，
“特征”：[{
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[-77.032，38.913]
},
“属性”：{
“标题”：“地图盒”，
“描述”：“华盛顿特区”
}
},
{
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[-122.414，37.776]
},
“属性”：{
“标题”：“地图盒”，
“描述”：“加利福尼亚州旧金山”
}
}
]
};
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v10',
中心：[-9615.8]，
缩放：2
});
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
//为每个要素制作一个标记，并将其添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup(
新mapboxgl.Popup({
抵销：25
})//添加弹出窗口
.setHTML(
'' +
marker.properties.title+
“”+
marker.properties.description+
“
”
)
)
.addTo（地图）；
});

已编辑
我忘记了选项4在mapbox上有圆圈，在本例中是绘制圆圈，但需要一些高级编码才能将其拖动。您可以用这种方式创建一个圆形图层

请将问题标记为已接受答案，如果它解决了您最初的问题，这种方式也将帮助其他用户知道它是解决方案
        mapboxgl.accessToken = 'PUT YOUR TOKEN HERE';

    var geojson = {
      'type': 'FeatureCollection',
      'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-77.032, 38.913]
          },
          'properties': {
            'title': 'Mapbox',
            'description': 'Washington, D.C.'
          }
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [-122.414, 37.776]
          },
          'properties': {
            'title': 'Mapbox',
            'description': 'San Francisco, California'
          }
        }
      ]
    };

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-96, 15.8],
      zoom: 2
    });

    // add markers to map
    geojson.features.forEach(function(marker) {
      // create a HTML element for each feature
      var el = document.createElement('div');
      el.className = 'marker';

      // make a marker for each feature and add it to the map
      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(
          new mapboxgl.Popup({
            offset: 25
          }) // add popups
          .setHTML(
            '<h3>' +
            marker.properties.title +
            '</h3><p>' +
            marker.properties.description +
            '</p>'
          )
        )
        .addTo(map);
    });