使用 Leaflet.draw 创建可拖动的圆

准备工作

首先，您需要在您的 HTML 页面中包含 Leaflet 和 Leaflet.draw 的脚本。您可以从 Leaflet 和 Leaflet.draw 的官方网站下载这些脚本。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>

接下来，您需要创建一个地图容器。地图容器是一个 HTML 元素，用于容纳地图。

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

创建地图

接下来，您需要创建一个地图对象。地图对象是 Leaflet 的核心对象，用于管理地图的显示和交互。

var map = L.map('map').setView([51.505, -0.09], 13);

添加绘图工具

接下来，您需要将绘图工具添加到地图中。绘图工具是一个 Leaflet.draw 对象，用于管理绘图工具的显示和交互。

var drawControl = new L.Control.Draw({
  draw: {
    polyline: false,
    polygon: false,
    rectangle: false,
    circle: true,
    marker: false
  }
});

map.addControl(drawControl);

创建可拖动的圆形

现在，您可以开始创建可拖动的圆形了。要创建可拖动的圆形，您需要使用 Leaflet.draw 的 circle 方法。

map.on('draw:created', function(e) {
  var layer = e.layer;

  if (layer.editing) {
    layer.editing.enable();
  }
});

总结

本教程向您展示了如何使用 Leaflet.draw 创建一个可拖动的圆形。可拖动的圆形是一个非常有用的几何图形，可以用来表示许多不同的东西，例如位置、区域或边界。