leaflet讲解:vue中使用leaflet进行地图打点marker事件（2）

哈喽，大家好！忍住了看小说的冲动，今天来继续为大家讲解leaflet。
今天为大家讲解的是leaflet进行打点事件！本次打点适用于任何用leaflet加载的地图，本次还继续用wmts加载的地图为大家讲解。

具体代码如下

>
	
>
		
>
	>
>
>
	export default {
		data() {
			return {}
		},
		mounted() {
			this.leafletMap()
		},
		methods: {
			leafletMap() {

				//设置地图相关初始配置
				var leafletMap = L.map("map", {
					 center: [30.279751,119.727856],// 设置地图中心点
					zoom: 1, //设置当前地图显示的缩放等级
					crs: L.CRS.EPSG4326 //设置坐标系4326
				})

				//设置地图可以进行0-22的等级缩放
				var matrixIds = [];
				for (var i = 0; i < 22; ++i) {
					matrixIds[i] = {
						identifier: "" + i,
						topLeftCorner: new L.LatLng(90, -180)
					};
				}

				//设置地图wmts瓦片地图加载配置
				var urlMap= 'http://192.168.11.25:6080/arcgis/rest/services/WMTS'//瓦片地图地址
				var wmtsOptionsMap = {
					layer: 'hangzhou:MapServer',//瓦片地图名称
					tileSize: 256, //切片大小
					format: "image/png",//瓦片图格式
					matrixIds: matrixIds,//可缩放
				}
				var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap)
				leafletMap.addLayer(wmtsMap)
				
				//设置ICON相关配置
				var Icon = L.divIcon({ 
				  className: 'my-div-icon',//自定义icon css样式
				  iconSize: [15, 15]//点大小
				})
				
 				var markers = []
				//点击地图进行打点
				 leafletMap.on('click', function(e) {
					 var lat = e.latlng.lat //纬度
          			 var lng = e.latlng.lng //经度
          			 //初次打点
          			 if(markers.length<1){
					  L.marker([lat, lng], {
           				 icon: Icon,
        			  }).addTo(leafletMap)
         			 //添加点到地图中
         			 markers.push(marker)
					}else{
						//再次打点更新点坐标
						markers[0].setLatLng([lat, lng])
					}

				}）
			}
		}
	}
>
>
	#map {
		width: 100%;
		height: 100vh;
	}
		.my-div-icon{
		width: 15px;
		height: 15px;
		background-color: red;
		border-radius: 50%;
	}
>

下面是效果图

可以看到点击地图可以进行打点。如果大家有什么疑问可以留言交流。