天地图结合leaflet

一、直接使用用天地图

1、引入天地图的 jsBridge

// index.html


	

2、创建地图（必须给 mapDiv 设置宽高；initMap()要在mounted中调用）

//map.vue

可参考：https://blog.csdn.net/qq_40423339/article/details/106080464 二、用leaflet创建地图

1、安装leaflet插件

npm install leaflet

2、在 main.js 导入

import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet'
Vue.L = Vue.prototype.$L = L

3、创建地图

//map.vue

三、使用leaflet.pm

1、安装leaflet.pm插件

npm install leaflet.pm

2、在 main.js 导入

import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css' 

3、使用leaflet.pm

//map.vue

initMap() {
	...
	
	this.map.pm.addControls({
	  position: "topleft",
	  drawPolygon: false, // 添加绘制多边形
	  drawMarker: false, //添加按钮以绘制标记
	  drawCircleMarker: false, //添加按钮以绘制圆形标记
	  drawPolyline: false, //添加按钮绘制线条
	  drawRectangle: true, //添加按钮绘制矩形
	  drawCircle: false, //  添加按钮绘制圆圈
	  editMode: true, //  添加按钮编辑多边形
	  dragMode: true, //   添加按钮拖动多边形
	  cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
	  removalMode: true, // 清除图层
	});
	// 设置绘制后的线条颜色等
	this.map.pm.setPathOptions({
	  color: "orange",
	  fillColor: "green",
	  fillOpacity: 0.4,
	});
	this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
	
	// 监听绘制
     this.getlatLngs()
},
getlatLngs() {
	var that = this
	//pm:drawstart 开始第一个点的时候调用
	//pm:drawend  禁止绘制时调用
	//pm:create  创建完成时调用
	this.mapObj.on("pm:create", e => {
	  this.messureLayer.push(e) // 在添加图层时,将其添加在数组
	  let layer = e.layer
	  let shape = e.shape
	  ... //具体业务需求
});