下面给大家讲解的是对后台返回的经纬度进行点标注操作。

<template>
	<div id="app">
		<div id="map" />
	</div>
</template>
<script>
	export default {
		data() {
			return {
				markes:[30.228742, 120.11787]//模拟后台数据
			}
		},
		mounted() {
			this.leafletMap()
		},
		methods: {
			leafletMap() {
				var than=this//改变this指向
				//设置地图相关初始配置
				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]//点大小
				})
				

						//添加点到地图中
					  L.marker(than.markes, {
           				 icon: Icon,
        			  }).addTo(leafletMap).bindPopup('嗨，我是点标注，我在这里')
 				   .openPopup()
         			 
				}）
			}
		}
	}
</script>
<style>
	#map {
		width: 100%;
		height: 100vh;
	}
		.my-div-icon{
		width: 15px;
		height: 15px;
		background-color: red;
		border-radius: 50%;
	}
</style>

下面是效果图