leaflet使用leaflet-spin插件实现地图加载中的效果

前言

一般地图会先渲染出来，从而添加图层进行画点和连线，但是当标记点数据过多时，会导致地图页面白屏时间过久，因此选择了leaflet-spin插件来优化这个问题。

一、插件地址:
GitHub - makinacorpus/Leaflet.Spin: Show a spinner on the map using Spin.js

二、下载插件:

npm install leaflet-spin 或  yarn add  leaflet-spin

三、引用:

<!-- 视图层js -->
<script module="leaflet" lang="renderjs">
	import "leaflet/dist/leaflet.css";
	import L from "leaflet";
	//找到你的安装路径导入js文件即可
	import "leaflet-spin/leaflet.spin.js"
	import "leaflet-spin/leaflet.spin.min.js"
</script>

四、具体使用: map.spin(true)显示加载效果，为false则不显示加载效果

	 this.map = L.map('map').setView([39.90, 116.39], 13);//跳到指定中心点和缩放级数
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(this.map);
    // 使用L.layerGroup():用于对多个图层进行分组并将它们作为一个图层处理
	const group = L.layerGroup().addTo(this.map)
	
	this.map.spin(true);//打开加载动画
	
	var _this = this;
	//ajax请求数据，5秒返回数据
	setTimeout(function () {
		// 定义一个线数组
		const lines = [];
		// 2json数据- 循环光缆列表及位置列表数据
		//循环 cablelist：根据任务页面提供的任务列表taskList进行循环
		//console.log(_this.taskIndex)
		// console.log(this.taskListJson)
		_this.taskListJson[_this.taskIndex].cablelist.forEach((cablelist, cableIndex) => {
			cablelist.fcmList.forEach((fcmList, fcmIndex) => {
				// console.log("fcmIndex",fcmList)
				//向连线数组添加经纬度信息 （格式：二维数组）
				lines.push([
					fcmList.geometry.latitude,
					fcmList.geometry.longitude
				]);
				//  添加多个标记点
				marker = L.marker([fcmList.geometry.latitude, fcmList.geometry
						.longitude
					], {
						icon: L.icon({ // //设置图标样式
							iconUrl: 'static/location.png',
							iconSize: [25, 41],
							iconAnchor: [12, 44]
						})
					}, ).addTo(group)
					.bindPopup("我是弹出框")
					.openPopup()
					.closePopup()
			})
		})
	
		// 画线
		const polyline = L.polyline(lines, {
			color: '#9400D3'
		}).addTo(_this.map);
		//关闭加载动画
		_this.map.spin(false);
}, 5000);

最后，解决了问题，地图加载完后开始显示加载中动画，标注点和线画完后，关闭加载动画。