地图技术知识：使用leafLet之绘图工具详解

目录安装引入在项目main.js中初始化地图初始化引入图层,可以引入多个图层地图事件添加绘制工具引入leafle.pm原生组件设置绘图样式设置语言自定义绘图按钮Drawing Mode绘图模式绑定按钮获取绘制的坐标自定义编辑按钮绘制多边形Edit Mode 编辑功能全局编辑Drag Mode 拖拽模式Removal Mode 移除模式Cutting Mode 剪切模式安装leafletleaflet.pm绘图工具npm install leaflet npm install leaflet.pm引入在项目main.js中importVuefromvue;importAppfrom./App.vue;importrouterfrom./router;importstorefrom./store;// 引入Leaflet对象 挂载到Vue上便于全局使用也可以单独页面中单独引用import*asLfromleaflet;importleaflet/dist/leaflet.css;importleaflet.pm;importleaflet.pm/dist/leaflet.pm.css;Vue.config.productionTipfalse;Vue.LVue.prototype.$LL;/* leaflet icon */deleteL.Icon.Default.prototype._getIconUrl;L.Icon.Default.mergeOptions({iconRetinaUrl:require(leaflet/dist/images/marker-icon-2x.png),iconUrl:require(leaflet/dist/images/marker-icon.png),shadowUrl:require(leaflet/dist/images/marker-shadow.png),});newVue({router,store,render:(h)h(App),}).$mount(#app);初始化地图初始化this.mapL.map(map,{center:[40.02404009136253,116.50641060224784],// 地图中心zoom:14,//缩放比列zoomControl:false,//禁用 - 按钮doubleClickZoom:false,// 禁用双击放大attributionControl:false,// 移除右下角leaflet标识});引入图层,可以引入多个图层letgaoDeLayerL.tileLayer(http://webrd01.is.autonavi.com/appmaptile?langzh_cnsize1scale1style7x{x}y{y}z{z})gaoDeLayer.addTo(this.map);地图事件// 添加地图点击弹窗this.map.on(click,(e){L.popup().setLatLng(e.latlng).setContent(You clicked the map at e.latlng.toString()).openOn(this.map);});添加绘制工具引入leafle.pm原生组件this.map.pm.addControls({position:topleft,drawPolygon:true,// 绘制多边形drawMarker:false,//绘制标记点drawCircleMarker:false,//绘制圆形标记drawPolyline:false,//绘制线条drawRectangle:true,//绘制矩形drawCircle:false,//绘制圆圈editMode:true,//编辑多边形dragMode:true,//拖动多边形cutPolygon:true,// 添加一个按钮以删除多边形里面的部分内容removalMode:true// 清除多边形});设置绘图样式接收参数1、单独设置某个模式的样式// 控制绘制样式 如下给Polygon多边形设置样式varoptions{// 连接线 标记之间的线templineStyle:{color:red,},// 提示线 从最后一个标记到鼠标光标的线hintlineStyle:{color:red,dashArray:[5,5],},// 绘制完成的样式pathOptions:{color:orange,fillColor:green,},};// 会激活绘制多边形功能this.map.pm.enableDraw(Polygon,options);2、设置全局的pathOptions样式this.map.pm.setPathOptions({color:orange,fillColor:green,fillOpacity:0.4,});设置语言//设置语言 en, de, it, ru, ro, es, fr, pt_br, zh , nlthis.map.pm.setLang(zh);自定义绘图按钮Drawing Mode绘图模式// 启用绘制多边形功能map.pm.enableDraw(Polygon,{snappable:true,//启用捕捉到其他绘制图形的顶点snapDistance:20,//顶点捕捉距离});// 关闭绘制 注意也可以关闭其他模式的绘制功能map.pm.disableDraw(Polygon);绑定按钮templatedivclasshomebuttonclickdrawRectangle绘制矩形/buttonbuttonclickdrawCircle绘制圆/buttonbuttonclickdisableDraw关闭绘制/buttondividmap/div/div/templatedrawRectangle(){this.map.pm.enableDraw(Rectangle,{snappable:true,snapDistance:20,});},drawCircle(){this.map.pm.enableDraw(Circle,{snappable:true,snapDistance:20,});},disableDraw(){this.map.pm.disableDraw(Rectangle);},获取绘制的坐标//pm:drawstart 开始第一个点的时候调用//pm:drawend 禁止绘制时调用//pm:create 图形创建完成时调用this.map.on(pm:drawstart,e{console.log(e,first);});this.map.on(pm:drawend,e{console.log(e,禁止绘制);});this.map.on(pm:create,e{console.log(e,绘制完成时调用);if(e.shapeCircle){console.log(e.layer._latlng,e.layer._radius,绘制坐标)}else{console.log(e.layer._latlngs[0],绘制坐标)}});自定义编辑按钮绘制多边形官方详解// 绘制多边形letlatlngs[[50.0214690112063,116.50239229202272],[50.019694293123855,116.50224208831787],[50.01979288978388,116.50580406188966],[50.021436146476105,116.50601863861085],[50.02253710631967,116.50316476821901]];// color线段颜色// weight线段宽度// opacity线段透明度// dashArray虚线间隔// fill是否填充内部(true/false)// fillColor:内部填充颜色如不设置默认为color颜色// fillOpacity内部填充透明度this.myPolygonL.polygon(latlngs,{color:red}).addTo(this.map);// 调整地图视图中心点为多边形中心点this.map.setView(this.myPolygon.getCenter(),16)Edit Mode 编辑功能layer为需要改变的图层即矢量元素如多边形等button clickenableEdit编辑/buttonbutton clickdisableEdit关闭编辑/button// 编辑enableEdit(){letlayerthis.myPolygon// 添加可编辑功能layer.pm.enable({allowSelfIntersection:false,});// 监听编辑事件layer.on(pm:vertexadded,e{console.log(e,添加顶点)});layer.on(pm:edit,e{console.log(e,拖动);console.log(e.target._latlngs[0],拖动后的坐标)});},// 关闭编辑disableEdit(){letlayerthis.myPolygon layer.pm.disable()}全局编辑// 开启全体编辑this.map.pm.enableGlobalEditMode();// 禁用全局编辑this.map.pm.disableGlobalEditMode()// 全局编辑切换this.map.pm.toggleGlobalEditMode();// 判断是否全局编辑,有返回值letisEditthis.map.pm.globalEditEnabled();Drag Mode 拖拽模式// 全局拖拽模式切换this.map.pm.toggleGlobalDragMode();// 是否启用全局拖动模式,有返回值console.log(this.map.pm.globalDragModeEnabled())// 全局的拖拽模式切换监听器this.map.on(pm:globaldragmodetoggled,e{console.log(e);});// 单个元素添加拖拽监听letlayerthis.myPolygon layer.on(pm:dragend,e{console.log(e,拖拽)});Removal Mode 移除模式map.pm.toggleGlobalRemovalMode();map.pm.globalRemovalEnabled()Cutting Mode 剪切模式button clickenableCut启用剪辑/buttonbutton clickdisableCut关闭剪辑/buttonenableCut(){// 开启剪切功能this.map.pm.Draw.Cut.enable({allowSelfIntersection:false,});// 单个元素添加剪切监听letlayerthis.myPolygon layer.on(pm:cut,e{console.log(e,剪切)});},disableCut(){// 关闭剪切功能this.map.pm.Draw.Cut.disable();}