Question

我正在寻找一个交互式地图，用户可以在其中单击以放置各种大小不同的多边形/圆形。一旦放置了这些形状，就需要保存这些形状，以便下次访问该页面时，它会记住用户放置这些多边形的位置。

如何使用Mapbox一次单击即可在地图上绘制预定义面积/大小的多边形，如多边形？

Answer 1

地图框中没有circles，必须将任何形状定义为点列表以形成多边形...因此选项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"}}

您可以尝试使用https://studio.mapbox.com/datasets/来了解如何手动绘制。这样可以创建一些预定义的“几乎完美的圆圈”，然后允许用户将其拖放到Mapbox-gl-js draw

使用选项2 创建这些形状的方法是使用turf，这是一种地理空间js引擎，可让您创建一些预定义的形状，包括circles

但是，如果您只是想将圆的形状放在一个具体点上作为标记，以便用户可以拖放，则选项3 是我创建的此示例小提琴向您展示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/

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

1 个答案: