使用插件 绘制leaflet上的图形

安装

npm i leaflet-draw

Vue 中引入

//引入绘图插件
import 'leaflet-draw'
import 'leaflet-draw/dist/leaflet.draw.css'

对应页面使用

 //添加绘制图层
            var drawnItems = new this.$utils.map.$L.FeatureGroup();
            this.map.addLayer(drawnItems);
            //添加绘制控件
            var drawControl = new this.$utils.map.$L.Control.Draw({
                draw: {
                    //绘制线
                    polyline: true,
                    //绘制多边形
                    polygon: true,
                    //绘制矩形
                    rectangle: true,
                    //绘制圆
                    circle: true,
                    //绘制标注
                    marker: true,
                    //绘制圆形标注
                    circlemarker: true
                },
                edit: {
                    //绘制图层
                    featureGroup: drawnItems,
                    //图形编辑控件
                    edit: true,
                    //图形删除控件
                    remove: true,
                }
            });
            //添加绘制控件
            this.map.addControl(drawControl);
             //绘制事件
            this.map.on(this.$utils.map.$L.Draw.Event.CREATED, function (e) {
                //获取标注的类型
                var type = e.layerType,
                //获取绘制图层
                drawlayer = e.layer;
                if (type === 'marker') {
                    //显示Popup
                    drawlayer.bindPopup('A popup!');
                }
                //绘制图形添加显示
                drawnItems.addLayer(drawlayer);
            });