想在地图上绘制圆形？Mapbox 插件帮你实现！

在 Mapbox 中，你可以通过添加绘图扩展插件来实现绘制圆形的功能。Mapbox 提供了一个名为 mapbox-gl-draw 的插件，它允许用户在地图上绘制各种形状，包括圆形。以下是如何使用 mapbox-gl-draw 插件来绘制圆形的步骤：

1. 引入 Mapbox GL JS 和 Mapbox GL Draw

首先，你需要在 HTML 文件中引入 Mapbox GL JS 和 Mapbox GL Draw 的库文件。

<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css" type="text/css" />

2. 初始化地图

接下来，初始化 Mapbox 地图。

<div id="map" style="width: 100%; height: 500px;"></div>
<script>
  mapboxgl.accessToken = '你的 Mapbox 访问令牌';
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [116.404, 39.915], // 初始地图中心点
    zoom: 12 // 初始缩放级别
  });
</script>

3. 添加 Mapbox GL Draw 插件

初始化地图后，添加 mapbox-gl-draw 插件。

const Draw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    trash: true
  }
});

map.addControl(Draw);

4. 绘制圆形

mapbox-gl-draw 默认不支持直接绘制圆形，但你可以通过绘制一个多边形来近似模拟圆形。以下是一个绘制近似圆形的示例代码：

function createCircle(center, radiusInKm, points) {
  const coords = {
    latitude: center[1],
    longitude: center[0]
  };

  const km = radiusInKm;

  const ret = [];
  const distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
  const distanceY = km / 110.574;

  let theta, x, y;
  for (let i = 0; i < points; i++) {
    theta = (i / points) * (2 * Math.PI);
    x = distanceX * Math.cos(theta);
    y = distanceY * Math.sin(theta);

    ret.push([coords.longitude + x, coords.latitude + y]);
  }
  ret.push(ret[0]);

  return ret;
}

map.on('load', function() {
  const center = [116.404, 39.915]; // 圆心坐标
  const radius = 1; // 半径，单位：公里
  const points = 64; // 圆形的点数，点数越多越接近圆形

  const circle = createCircle(center, radius, points);

  Draw.add({
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [circle]
    }
  });
});

5. 处理绘制完成事件

你可以监听绘制完成事件，以便在用户完成绘制后执行一些操作。

map.on('draw.create', function(e) {
  const data = Draw.getAll();
  console.log(data); // 输出绘制的图形数据
});

6. 删除图形

你可以通过 Draw.delete 方法来删除绘制的图形。

const features = Draw.getAll();
if (features.features.length > 0) {
  Draw.delete(features.features[0].id);
}

总结

通过以上步骤，你可以在 Mapbox 地图上使用 mapbox-gl-draw 插件绘制近似圆形。虽然 mapbox-gl-draw 不直接支持圆形绘制，但通过绘制一个多边形来模拟圆形是一个常见的解决方案。可以根据需要调整多边形的点数来控制圆形的平滑度。