Leaflet.js：拖拽地图时显示移动矩形的实现问询

我来帮你梳理这个Leaflet拖拽绘制矩形的实现方案，结合你提供的代码片段，咱们一步步拆解：

在拖拽地图的过程中，实时在地图上绘制矩形，完成拖拽后确定最终的矩形范围。

你提供的简化版代码已经初始化了Leaflet地图，我补充了拖拽绘制矩形的关键交互逻辑：

var map = new L.Map('leaflet', {
    layers: [
        new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ],
    center: [36, -98],
    zoom: 6,
    renderer: L.svg({ padding: 100 })
});

// 用于存储绘制中的矩形和起始坐标
var drawingRect = null;
var startLatLng = null;

// 拖拽开始：记录起始点并创建初始矩形
map.on('dragstart', function(e) {
    startLatLng = map.mouseEventToLatLng(e.originalEvent);
    // 创建一个初始的极小矩形，后续实时更新
    drawingRect = L.rectangle([startLatLng, startLatLng], {
        color: '#ff4444',
        weight: 2,
        fillOpacity: 0.1
    }).addTo(map);
});

// 拖拽过程：实时更新矩形的边界
map.on('drag', function(e) {
    if (!drawingRect || !startLatLng) return;
    var currentLatLng = map.mouseEventToLatLng(e.originalEvent);
    // 更新矩形的对角坐标，实现实时绘制效果
    drawingRect.setBounds([startLatLng, currentLatLng]);
});

// 拖拽结束：完成绘制，可在此处理最终矩形数据
map.on('dragend', function(e) {
    if (!drawingRect) return;
    // 获取最终的矩形边界（包含西南和东北两个角的经纬度）
    var finalBounds = drawingRect.getBounds();
    console.log('最终矩形边界:', finalBounds);
    
    // 如果你需要保留绘制的矩形，就注释下面两行；如果是临时绘制，可移除图层
    // drawingRect.remove();
    // drawingRect = null;
});

• 事件监听：借助Leaflet的dragstart、drag、dragend三个拖拽事件，覆盖从开始绘制到完成的全流程
• 坐标转换：用map.mouseEventToLatLng()把鼠标的屏幕坐标转换成地图的经纬度坐标，确保矩形位置准确
• 矩形更新：通过L.rectangle的setBounds()方法，实时更新矩形的对角坐标，实现拖拽过程中的动态绘制效果

内容的提问来源于stack exchange，提问作者Kevin D