leaflet 绘制矩形 编辑矩形

在 Leaflet 中，可以使用 L.rectangle 方法绘制矩形，该方法接受一个包含 2 个经纬度坐标的数组作为参数，分别表示矩形的左上角和右下角的坐标。

例如，要在地图上绘制一个以 (51.5, -0.1) 和 (51.45, -0.25) 为左上角和右下角的矩形，可以使用以下代码：

var rectangle = L.rectangle([[51.5, -0.1], [51.45, -0.25]]).addTo(map);

要编辑已有的矩形，可以使用 Leaflet 的 Editable 插件，该插件提供了编辑多种地图元素的功能，包括矩形、多边形等。

首先，需要将矩形设置为可编辑状态，可以使用以下代码：

rectangle.enableEdit();

然后，当用户拖动矩形的顶点或边缘时，将触发编辑事件。可以监听编辑事件，在事件处理程序中获取矩形的新坐标，并将其保存到数据库或其他后端服务中。

rectangle.on('editable:dragend', function(event) {
  var newBounds = event.layer.getBounds();
  // 保存新的矩形坐标到数据库
});

相关问题

Leaflet-draw绘制区域，可以编辑，删除，触发回调 代码示例

以下是一个代码示例，演示了如何使用Leaflet-draw绘制、编辑和删除区域，并触发相应的回调函数。

// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 创建绘图控件
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: {
        polygon: true,
        rectangle: true,
        circle: true,
        marker: true
    }
});
map.addControl(drawControl);

// 监听绘制完成事件
map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    console.log(layer.toGeoJSON()); // 输出绘制的图形信息
});

// 监听编辑完成事件
map.on(L.Draw.Event.EDITED, function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        console.log(layer.toGeoJSON()); // 输出编辑后的图形信息
    });
});

// 监听删除完成事件
map.on(L.Draw.Event.DELETED, function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        console.log(layer.toGeoJSON()); // 输出删除后的图形信息
    });
});

在上述代码中，我们首先创建了一个Leaflet地图，并添加了一个OpenStreetMap的瓦片图层。然后，我们创建了一个绘图控件`drawControl`，并将其添加到地图上。在绘图控件中，我们设置了可以绘制多种类型的图形，包括多边形、矩形、圆形和标记。

接着，我们监听了三个事件，分别是绘制完成事件`L.Draw.Event.CREATED`、编辑完成事件`L.Draw.Event.EDITED`和删除完成事件`L.Draw.Event.DELETED`。在每个事件处理函数中，我们获取了相应的图形信息，并使用`console.log`输出到控制台，以便我们进行调试和测试。

最后，我们将绘制的图形添加到了一个`drawnItems`图层组中，以便我们可以在编辑和删除时方便地进行管理。

leaflet-draw

Leaflet-draw 是一个基于 Leaflet 的开源 JavaScript 库，它提供了在 Leaflet 地图上绘制和编辑各种图形的功能，包括点、线、多边形、矩形、圆形等等。它的使用非常简单，只需要引入相应的 CSS 和 JavaScript 文件，然后创建一个绘制工具条，就可以在地图上进行绘制和编辑操作了。Leaflet-draw 是一个非常实用的库，适用于地图标注、测量、区域选择等场景。