在vue2项目中使用天地图+Leaflet搭配使用(一)

  本次记录在项目中用到的新东西(纯小白记录项目)！！！本次项目中运用到天地图，使用到天地图的API，首要的是在天地图官网进行申请注册用户===>申请成为天地图开发者===>获取到许可的Key===>使用API及服务。

   废话不多说，首先要创建一个vue2的项目(不会创建请移直创建一个项目 | Vue CLI (vuejs.org))，

首先，在项目中安装Leaflet的依赖 npm install leaflet，

然后初始化地图，先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。然后引入地图需要的类

 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
 import "leaflet.pm";
 import "leaflet.pm/dist/leaflet.pm.css";

进行配置。（注：代码中的you_key换成申请天地图的key！！！）

initMap() {
				this.map = L.map("map", {
				crs: L.CRS.EPSG4326,
				center: [39.92800, 116.40400],
				zoom: 14,
				maxZoom: 17, //最大缩放层级
				minZoom: 3, //最小缩放层级
				tileSize: 256, //切片大小
				attributionControl: false,
			});
            L.tileLayer(
                "http://t0.tianditu.gov.cn/img_c/wmts?tk=you_Key&layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}", {
                crossOrigin: 'anonymous',
                tileSize: 256,
                zoomOffset: 1
            }).addTo(this.map);


			// 矢量图
			L.tileLayer(
				"http://t0.tianditu.gov.cn/cia_c/wmts?tk=you_Key&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}", {
				crossOrigin: 'anonymous',
				tileSize: 256,
				zoomOffset: 1
			}).addTo(this.map);
}

实现效果如下：

然后在添加一些绘图工具

//添加的绘制工具
			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.geoJson = this.gEditableLayer.toGeoJSON()为了解析数据格式为GeoJson的格式传递给后端，如有需可到GeoJson官网查看详情格式！首页 | GeoJSON.cn

// 绘制事件监听
this.map.on("pm:drawstart", (e) => {
   console.log(e, "绘制开始第一个点");
});
this.map.on("pm:drawend", (e) => {
    console.log(e, "禁⽌绘制、绘制结束");
});
this.map.on("pm:create", (e) => {
    console.log(e, '开始绘制========');
});
this.map.on("pm:globalremovalmodetoggled", (e) => {
     console.log(e, "清除图层时调用");
});
this.map.on("pm:remove", (e) => {
     console.log(e, '删除事件。。。。。')
})

效果如下：

 接下去的按照需求进行操作就可以了。。。。。。

（L.map API 的核心类 - 它用于在页面上创建地图并对其进行操作。

该方法的第二个参数中的地图状态选项如下(还有一些动画选项，交互选项等查看apiapi)）

选项	类型	默认	描述
crs	CRS	L.CRS.EPSG3857	要使用的坐标参考系。如果您不确定它的含义，请不要更改它。
zoom	Number	undefined	初始地图缩放级别
minZoom	Number	*	地图的最小缩放级别。如果未指定且地图中至少有一个GridLayer或TileLayer，minZoom则将使用其选项中最低的一个。
maxZoom	Number	*	地图的最大缩放级别。如果未指定且地图中至少有一个GridLayer或TileLayer，maxZoom则将使用其选项中的最高选项。
layers	Layer[]	[]	最初将添加到地图的图层数组
maxBounds	LatLngBounds	null	设置此选项后，地图会将视图限制在给定的地理范围内，如果用户尝试在视图外平移，则会将用户弹回。要动态设置限制，请使用 setMaxBounds方法。
renderer	Renderer	*	在地图上绘制矢量图层的默认方法。L.SVG 或L.Canvas默认情况下取决于浏览器支持。
center	LatLng	undefined	地图的初始地理中心