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

Question

我想创建一个交互式地图，用户只需单击即可放置各种 polygons/circles 大小不一的地图。一旦他们放置了这些形状，就需要保存它，以便下次他们访问该页面时，它会记住用户放置这些多边形的位置。

如何使用 Mapbox 在地图上通过单击在预定义 area/size 上绘制一个类似多边形的圆形？

Answer 1

mapbox 中没有 circles，任何形状都必须定义为点列表才能形成多边形...所以 选项 1 将创建您自己的 'rounded' 多边形作为 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"}}

您可以尝试使用 https://studio.mapbox.com/datasets/ to understand how to draw this manually. That would enable to create some predefined 'almost perfect circles' and then allow the users to drag and drop them through the Mapbox-gl-js draw

选项 2 将创建这些形状是使用 turf which is a geospatial js engine which allows you to create some predefined shapes, including circles

但是如果你只是想把一个圆的形状放在一个具体的点上作为标记，用户可以拖放，选项3在这个我创建的示例 fiddle 是为了向您展示 how to create a custom circle marker，它包括创建一个基于 svg 圆形的标记。显然，此形状不会缩放为基于 mapbox 多边形矢量。

只需为标记定义样式（图片来自维基百科，您需要获得自己的 svg 形状）

<style>
.marker {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

然后是相关的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);
    });

已编辑 我忘记了一个 选项 4 在 mapbox 上有圆圈，在这种情况下绘制圆圈但需要一些高级编码才能使它们可拖动。您可以通过这种方式创建一个圆圈图层...

https://jsfiddle.net/jscastro76/vjkt7wyx/14/

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

Adding circle polygon to Map on click

mapbox

mapbox-gl-js