Leaflet Geoman点击按钮加载预定义多边形到地图的实现方法

核心修改说明 #

• 直接使用Leaflet原生的L.polygon方法创建多边形实例即可，Geoman会自动识别所有添加到地图上的矢量图层，无需额外特殊适配
• 加载后的多边形支持Geoman的编辑、删除、拖拽等全部操作，和手动绘制的图层行为完全一致

代码修改 #

你只需要把原有的loadSquare函数替换为下方的代码即可：

function loadSquare() {
    // 预定义多边形坐标，注意当前顺序为 [经度, 纬度]，如果显示位置异常可调换每个坐标点的两个值
    const polygonCoords = [[[7.43067, 49.109838], [7.43067, 50.331436], [10.135936, 50.331436], [10.135936, 49.109838]]];
    
    // 创建多边形实例，可自定义样式参数
    const squarePolygon = L.polygon(polygonCoords, {
        color: '#3388ff',
        weight: 2,
        fillColor: '#3388ff',
        fillOpacity: 0.2
    }).addTo(map);
    
    // 可选配置：默认开启多边形的编辑状态，不需要可以删除下一行
    squarePolygon.pm.enable();
}

可选优化（避免重复加载） #

如果需要避免多次点击按钮重复生成多边形，可以增加全局变量做加载判断，修改后的代码如下：

// 全局定义变量存储已加载的多边形实例
let loadedPolygon = null;

function loadSquare() {
    // 已加载过的话先移除旧图层
    if(loadedPolygon) {
        map.removeLayer(loadedPolygon);
        loadedPolygon = null;
    }
    const polygonCoords = [[[7.43067, 49.109838], [7.43067, 50.331436], [10.135936, 50.331436], [10.135936, 49.109838]]];
    loadedPolygon = L.polygon(polygonCoords, {
        color: '#3388ff',
        weight: 2,
        fillColor: '#3388ff',
        fillOpacity: 0.2
    }).addTo(map);
    loadedPolygon.pm.enable();
}

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