【VUE3+Leaflet天地图】Leaflet天地图结合VUE3的使用步骤

​

Leaflet官网地址（中文）

Leaflet - 一个交互式地图 JavaScript 库

一、下载安装

npm install @leaflet@1.9.3 @leaflet.chinatmsproviders@3.0.4

二、项目中引入

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet.chinatmsproviders';

三、设置key

1. 天地图key申请地址

国家地理信息公共服务平台 天地图

const MapKey = "你的地图key";

四、准备容器

<!-- 地图挂载点 -->
<div id="baseMap"></div>

五、初始化地图

可以根据项目需求自选使用复杂配置方式还是简写方式：

1. 复杂配置

let map = L.map("baseMap",{
		minZoom: 1, //最小缩放值
		maxZoom: 18, //最大缩放值
		center:L.latLng(31.086444, 121.734942), //注意和其他地图经纬度格式区别
		zoom: 17, //初始缩放值
		zoomControl: false, //是否启用地图缩放控件
		attributionControl: false, //是否启用地图属性控件
	});

2. 简写配置

let map = L.map('map').setView([31.086444, 121.734942], 17);

六、设置瓦片图层（如卫星地图）

//卫星地图
let satelliteTileLayer = L.layerGroup([
	L.tileLayer.chinaProvider('TianDiTu.Satellite.Map',{
		key:MapKey, //你的地图key
	}),
	L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion',{
		key:MapKey, //你的地图key
	})
]);
satelliteTileLayer.addTo(map);

七、其他需求

1. 标点

以复杂icon标点示例：

1）静态标点

// latlngs是标点坐标，格式同初始化地图时的中心坐标
let marker = L.marker(latlngs, {
	icon: L.divIcon({
		className: "dIcon", //标点icon的容器类名
		html:`标点icon的html字段内容`, //可以添加标点名字之类的自定义内容
		// iconSize: [90, 36] //标点icon的容器大小，也可以直接用className类名写css样式
	})
}).addTo(map); //添加到地图中

2）动态标点

const marker1 = ref(null); //标点实例储存

// latlngs是标点坐标，格式同初始化地图时的中心坐标
let marker = L.marker(latlngs, {
	icon: L.divIcon({
		className: "dIcon", //标点icon的容器类名
		html:`标点icon的html字段内容`,
		// iconSize: [90, 36] //标点icon的容器大小，也可以直接用className类名写css样式
	})
});

// 将指定标点添加到地图中的方法
const setMarker = ()=>{
  marker1.value = marker.addTo(map); //添加到地图中
};

2. 绘制多边形区域

注意：在创建多边形时传递的最后一个点不应该和第一个相同，最好过滤掉这些点。

// 从一个 LatLng 点的数组中创建一个多边形
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

let polygonRef = ref(null)

// 多边形区域
let polygon = L.polygon(latlngs,{
	stroke:true, //是否描边
	weight:1, //描边宽度，单位：像素
	opacity:1, //描边透明度
	fillColor:'#fff', //填充颜色
	fillOpacity:0.3, //填充透明度
	color:'#fff', //整体颜色
	interactive:false //该图层能否发出鼠标事件，是否作为底层地图的一部分
});
polygonRef.value = polygon.addTo(map); //多边形区域添加到地图中

// 将地图放大到多边形的位置
map.fitBounds(polygon.getBounds());

 附上：多边形的一些其他配置项

​编辑

3. 挂载弹窗（自定义）

1）弹窗内容节点元素准备

//准备自定义的弹窗内容（此处以组件形式示例）
<popupMarker ref="popupMarkerRef"></popupMarker>

2）弹窗内容挂载

// 弹窗挂载元素
const popupMarkerRef = ref();

//弹窗内容更新函数
const updatePopupMarker = (index)=>{
	store.popupMarkerShow = true; //打开弹窗中v-if定义的是否显示参数
	let mapPop = popupMarkerRef.value.$el; //拿到弹窗节点元素
    L.popup({ minWidth: 30, closeButton: true })
	  .setLatLng([37, -102.04]) //弹窗显示的坐标位置
	  .setContent(mapPop) //挂载弹窗节点元素
	  .openOn(map);  //打开弹窗
    map.setView([37, -102.04]); //地图视野中心重新定位
}

 八、 销毁地图实例

onUnmounted(()=>{
	map && map.remove();
})

感谢阅读，如有疑问欢迎讨论和补充~~

​