如何使用Leaflet JS添加按钮实现Polygon、line绘制功能

原生Leaflet没有内置绘图交互能力，新手直接手写鼠标事件逻辑要处理很多边界冲突，最稳妥的方案是使用Leaflet.draw插件实现，步骤如下：

1. 加载依赖资源 #

注意加载顺序：先加载Leaflet核心库，再加载插件资源，顺序反了会直接报错。

<!-- Leaflet 核心资源 -->
<link rel="stylesheet" href="本地路径/leaflet.css" />
<script src="本地路径/leaflet.js"></script>
<!-- Leaflet.draw 插件资源 -->
<link rel="stylesheet" href="本地路径/leaflet.draw.css" />
<script src="本地路径/leaflet.draw.js"></script>

2. 初始化地图与绘制专用图层 #

不要把用户绘制的图形直接叠加在底图上，单独建一个矢量图层存放，后续做编辑、清空、数据导出都更方便。

// 初始化地图，设置中心点坐标和初始缩放级别
const map = L.map('map容器DOM的ID').setView([39.9042, 116.4074], 12);
// 加载自定义底图
L.tileLayer('你的底图瓦片服务地址', {
    maxZoom: 18
}).addTo(map);

// 初始化存放用户绘制图形的图层
const drawnLayer = new L.FeatureGroup();
map.addLayer(drawnLayer);

3. 配置并添加绘制功能按钮 #

初始化绘制控件时，可以按需开关功能项，不需要的绘制类型直接设为false隐藏即可，控件默认悬浮在地图左上角。

const drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        // 开启多边形绘制，可自定义图形样式、是否显示面积提示等
        polygon: {
            shapeOptions: {
                color: '#165DFF',
                weight: 2,
                fillOpacity: 0.2
            },
            showArea: true
        },
        // 开启线段绘制
        polyline: {
            shapeOptions: {
                color: '#F53F3F',
                weight: 3
            }
        },
        // 关闭不需要的绘制功能
        circle: false,
        rectangle: false,
        marker: false,
        circlemarker: false
    },
    edit: {
        featureGroup: drawnLayer, // 绑定绘制图层，支持对已画图形二次编辑
        remove: true // 开启删除图形按钮
    }
});
// 把控件添加到地图上
map.addControl(drawControl);

4. 绑定绘制事件处理业务逻辑 #

用户完成绘制、编辑、删除操作时会触发对应事件，你可以在回调里拿到图形数据做后续处理。

// 监听绘制完成事件
map.on(L.Draw.Event.CREATED, function (event) {
    const currentShape = event.layer;
    // 将新绘制的图形添加到专用图层
    drawnLayer.addLayer(currentShape);
    // 可以直接拿到图形的GeoJSON格式数据，用于后续存储、计算等业务
    const shapeGeoJson = currentShape.toGeoJSON();
    console.log('新绘制图形数据：', shapeGeoJson);
});

// 可选：监听编辑、删除事件
map.on(L.Draw.Event.EDITED, function () {
    // 图形编辑完成后的逻辑，比如重新计算面积、同步更新后端数据
    console.log('图形已更新');
});
map.on(L.Draw.Event.DELETED, function () {
    console.log('图形已删除');
});

如果你确实不想依赖插件、要从零实现绘制逻辑，核心是监听地图的click、mousemove、dblclick事件：点击地图时记录坐标点，鼠标移动时实时生成临时预览图形，双击时结束绘制、生成最终图形。不推荐新手这么做，需要自行处理地图拖拽冲突、双击缩放冲突、屏幕坐标转经纬度等大量边界问题，插件已经把这些兼容问题都处理好了。

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