《Leaflet 进阶知识点》- Leaflet.draw 交互绘制

一、安装

使用插件 Leaflet.draw（install）

npm i leaflet-draw

二、 Vue 中引入

<script> 中引入 js

import 'leaflet-draw'

<style> 中引入 css

@import '~leaflet-draw/dist/leaflet.draw.css'

三、初始化

//初始化绘制控件
this.drawControl = new L.Control.Draw({
    position: 'topright',//控件位置 'topleft'(默认), 'topright', 'bottomleft' or 'bottomright'
    draw: {
        polyline: true,
        polygon: true,
        rectangle: true,
        circle: true,
        marker: true,
    }
})
//.addTo(this.map);// 要添加到 L.map 对象中
// 添加绘制完监听事件
this.map.on(L.Draw.Event.CREATED, this.drawCreatedBack);

知识点：

1. 代码第 3 行，设置控件位置，有4个选项，'topleft', 'topright', 'bottomleft' or 'bottomright'，默认为 topleft；

2. 代码第 5 - 9 行，设置可绘制的类型，其中 marker 为点；

3. 代码第 12 行， addTo 可不添加。然后自定义样式，启动绘制；

4. 代码第 14 行，地图容器监听绘制完成事件，第二个参数为回调。如果取消监听，第二个参数要一样，如下：

this.container.map.off(L.Draw.Event.CREATED, this.drawCreatedBack);

四、启动绘制

switch (idx) {
    case 0: {// 点
        this.drawObj = new L.Draw.Marker(this.map, this.drawControl.options.draw.marker);
        break;
    }
    case 1: {// 圆
        this.drawObj = new L.Draw.Circle(this.map, this.drawControl.options.draw.circle);
        break;
    }
    case 2: {// 线
        this.drawObj = new L.Draw.Polyline(this.map, this.drawControl.options.draw.polyline);
        break;
    }
    case 3: {// 矩形
        this.drawObj = new L.Draw.Rectangle(this.map, this.drawControl.options.draw.rectangle);
        break;
    }
    case 4: {// 多边形
        this.drawObj = new L.Draw.Polygon(this.map, this.drawControl.options.draw.polygon);
        break;
    }                    
}
// 启动 
this.drawObj.enable();

知识点：

1. drawObj 是绘制对象，有点、线、圆、矩形、多边形；

2. drawControl 是初始化中 new 的 L.Control.Draw 控件对象；

3. 最后一行，也是最关键的，一定要 enable 启动绘制；

五、取消绘制

this.drawObj.disable();

六、绘制完成回调

// 交互绘制回调
drawCreatedBack(e) {
    // 绘制的图形图层对象
    let drawLayer = e.layer;
    // 判断当前没有图层组，需先添加
    if(!this.drawLayerGrounp) {
        //图层组
        this.drawLayerGrounp = new L.FeatureGroup();
        // 添加
        this.map.addLayer(this.drawLayerGrounp);
    }
    // 添加到图层组
    this.drawLayerGrounp.addLayer(drawLayer);
}

知识点：

1. 代码第 4 行，返回绘制的图层对象，如 L.polyline、L.polygon等；

2. 代码第 6 - 11 行，将绘制的图层对象添加到图层组中；

3、代码第 13 行，注意是把绘制的图层对象添加到图层组中；

七、清除绘制

//清除绘制
stopDraw() {
    // 删除全部绘制的图层
    if(this.drawLayerGrounp) {
        this.drawLayerGrounp.clearLayers();
    }
    // 取消绘制操作
    this.drawObj.disable();
}

八、销毁

// 销毁绘制控件
destoryDrawCtr() {
    // L.Control.Draw 控件对象
    this.drawControl = null;
    // 绘制对象
    this.drawObj = null;
    // 删除全部绘制的图层
    if(this.drawLayerGrounp) {
        this.drawLayerGrounp.clearLayers();
    }
    // 取消绘制完监听事件，避免在真正开发中，其它地方也监听了 CREATED 事件
    this.container.map.off(L.Draw.Event.CREATED, this.drawCreatedBack);
}

九、效果

十、全部源码

<template>
    <div>
        <div id="map" class="map-main"></div>
        <div class="btn-list">
            <button @click="initDrawCtrl">初始化绘制控件</button><br>
            <button @click="destoryDrawCtr">销毁绘制控件</button><br>
            <button @click="startDraw(0)">点</button>
            <button @click="startDraw(1)">圆</button>
            <button @click="startDraw(2)">线</button>
            <button @click="startDraw(3)">矩形</button>
            <button @click="startDraw(4)">多边形</button>
            <button @click="stopDraw">清除</button>
        </div>
    </div>
</template>

<script>
import 'leaflet'
import 'leaflet-draw'
import '../../public/js/leaflet.draw-cn.js'

export default {
    data() {
        return {
            // L.map 对象
            map: null,
            // L.Control.Draw 控件对象
            drawControl: null,
            // 绘制对象
            drawObj: null,
            // 图形图层组
            drawLayerGrounp: null
        }
    },
    methods: {
        // 启动绘制
        startDraw(idx) {
            // 先取消
            if(this.drawObj) {
                this.drawObj.disable();
            }
            switch (idx) {
                case 0: {// 点
                    this.drawObj = new L.Draw.Marker(this.map, this.drawControl.options.draw.marker);
                    break;
                }
                case 1: {// 圆
                    this.drawObj = new L.Draw.Circle(this.map, this.drawControl.options.draw.circle);
                    break;
                }
                case 2: {// 线
                    this.drawObj = new L.Draw.Polyline(this.map, this.drawControl.options.draw.polyline);
                    break;
                }
                case 3: {// 矩形
                    this.drawObj = new L.Draw.Rectangle(this.map, this.drawControl.options.draw.rectangle);
                    break;
                }
                case 4: {// 多边形
                    this.drawObj = new L.Draw.Polygon(this.map, this.drawControl.options.draw.polygon);
                    break;
                }                    
            }
            // 启动 
            this.drawObj.enable();
        },
        //清除绘制
        stopDraw() {
            // 删除全部绘制的图层
            if(this.drawLayerGrounp) {
                this.drawLayerGrounp.clearLayers();
            }
            // 取消绘制操作
            this.drawObj.disable();
        },
        // 初始化地图
        ininMap() {
            // 初始化地图容器并显天地图
            this.map = L.map('map', {
                //参考坐标系
                crs: L.CRS.EPSG4326,
                //不添加属性说明控件
                attributionControl: false,
                //限制显示地理范围
                maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
            });

            // 设置范围(这里是武汉)
            this.map.setView([30.59, 114.32], 10);
            // 矢量图+注记
            // let mapTypes = ['vec_c', 'cva_c'];  
            // 影像图+注记
            let mapTypes = ['img_c', 'cia_c']; 
            // 天地图 token
            let tdtToken = 'xxxxxxxxxxxxxxxx';
            let layers = [];
            for(let i = 0, len = mapTypes.length; i < len; i++) {
                let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
                let layer = L.tileLayer(tdtUrl, {
                    zoomOffset: 1,
                    noWrap: true,
                    bounds: [[-90, -180], [90, 180]]
                });
                layers.push(layer);
            }
            L.layerGroup(layers).addTo(this.map);
        },
        // 交互绘制回调
        drawCreatedBack(e) {
            console.log('绘制完成', e);
            // 绘制的图形图层对象
            let drawLayer = e.layer;
            // 判断当前没有图层组，需先添加
            if(!this.drawLayerGrounp) {
                //图层组
                this.drawLayerGrounp = new L.FeatureGroup();
                // 添加
                this.map.addLayer(this.drawLayerGrounp);
            }
            // 添加到图层组
            this.drawLayerGrounp.addLayer(drawLayer);
        },
        // 初始化绘制控件
        initDrawCtrl() {
            //初始化绘制控件
            this.drawControl = new L.Control.Draw({
                position: 'topright',//控件位置 'topleft'(默认), 'topright', 'bottomleft' or 'bottomright'
                draw: {
                    polyline: true,
                    polygon: true,
                    rectangle: true,
                    circle: true,
                    marker: true,
                }
            }).addTo(this.map);// 要添加到 L.map 对象中
            // 添加绘制完监听事件
            this.map.on(L.Draw.Event.CREATED, this.drawCreatedBack);
        },
        // 销毁绘制控件
        destoryDrawCtr() {
            // L.Control.Draw 控件对象
            this.drawControl = null;
            // 绘制对象
            this.drawObj = null;
            // 删除全部绘制的图层
            if(this.drawLayerGrounp) {
                this.drawLayerGrounp.clearLayers();
            }
            // 取消绘制完监听事件，避免在真正开发中，其它地方也监听了 CREATED 事件
            this.container.map.off(L.Draw.Event.CREATED, this.drawCreatedBack);
        }
    },
    mounted() {
        // 初始化地图
        this.ininMap();
        // 初始化绘制控件
        this.initDrawCtrl();
    }
}
</script>

<style lang="stylus" scoped>
@import '~leaflet/dist/leaflet.css'
@import '~leaflet-draw/dist/leaflet.draw.css'
.map-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #CCC;
}
.btn-list {
    z-index: 2000;
    position: absolute;
    top: 2px;
    left: 80px;
}
</style>

注意插件默认语言是英文，可参考此篇做中英文转换：

 《Leaflet 进阶知识点》- Leaflet.draw 中英文转换