mapbox-gl-js 在纬度/经度周围创建一个圆圈？

Question

我需要围绕用户点击的点创建一个圆圈。我该怎么做？每个教程都展示了从 geojson 源中提取一个圆圈而不是创建一个圆圈。还需要能够编辑半径。

Answer 1

您自己尝试过吗？按照 mapbox 示例，您应该能够了解如何构建类似的东西。

你需要做三件事:

• 创建一个保存数据的源
• 创建一个“circle”类型的图层，用于将数据显示为圆圈
• 在用户每次点击时，提取“纬度、经度”并将一个点添加到您的数据列表中。然后在 map 上将所有这些点显示为一个圆圈。

这是我如何编码的示例:https://jsfiddle.net/andi_lo/495t0dx2/

希望对你有帮助

mapboxgl.accessToken = '####';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

map.on('load', () => {
  const points = turf.featureCollection([]);
 
  // add data source to hold our data we want to display
  map.addSource('circleData', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [],
    },
  });

  // add a layer that displays the data
  map.addLayer({
    id: 'data',
    type: 'circle',
    source: 'circleData',
    paint: {
      'circle-color': '#00b7bf',
      'circle-radius': 8,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#333',
   },
  });

  // on user click, extract the latitude / longitude, update our data source and display it on our map
  map.on('click', (clickEvent) => {
    const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
    points.features.push(turf.point(lngLat));
    map.getSource('circleData').setData(points);
  });
});

#map {
  height: 500px;
}

<div id="map"></div>