包括了绘制图形(矩形,多边形,标记,线条),设置图形样式,监听地图中心点缩放比例,监听图形绘制等基本用法
网址:leaflet.pm - npm (npmjs.com)
initMap(){
this.map.pm.setLang('zh') //leaflet pm
this.map.pm.addControls({ //leaflet pm控件(绘制图形)
position: 'topright',
drawPolygon: true, // 绘制多边形
drawMarker: true, //绘制标记点
drawCircleMarker: false, //绘制圆形标记
drawPolyline: true, //绘制线条
drawRectangle: true, //绘制矩形
drawCircle: false, //绘制圆圈
editMode: false, //编辑多边形
dragMode: false, //拖动多边形
cutPolygon: false, // 添加一个按钮以删除多边形里面的部分内容
removalMode: true // 清除多边形
})
this.map.on('zoomend', e => { //leaflet pm的zoom监听函数
this.mapCenter = this.map.getCenter() //获取当前经纬度
this.mapZoom = e.target._zoom //获取当前缩放级别
})
this.map.on('pm:create', e => { //leaflet pm绘制图形监听函数
if (e.shape == 'Marker') { //返回的e中有其边框经纬度,形状等信息
this.shape = e.layer._latlng
} else {
this.shape = e.layer._latlngs
}
})
this.map.on('pm:remove', e => { //监听删除
})
},
changeStyle(){ //设置leaflet pm绘制图形的颜色,粗细等
var options = {
templineStyle: {//实线
color: '#97bdff'
},
hintlineStyle: {//虚线
color: '#97bdff',
dashArray: [5, 5]
},
pathOptions: {//绘制完成后
color: '#94c6ff', //线
fillColor: 'blue', //内部
weight: 0.9
}
}
this.map.pm.enableDraw('Polygon', options)
this.map.pm.enableDraw('Rectangle', options)
}