场景
Leaflet快速入门与加载OSM显示地图：
Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-
在上面的基础上，怎样使用插件实现地图加载等待效果如下
注：
博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、插件地址
GitHub - makinacorpus/Leaflet.Spin: Show a spinner on the map using Spin.js
2、下载源码，引入插件所需要的spin.js和leaflet.spin.min.js
3、添加地图区域GeoJson数据
var campus = {
type: "Feature",
properties: {
popupContent: "This is the Auraria West Campus",
style: {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: .8
}
},
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.7462000683517],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.0007152557373, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],
[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],
[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
};4、模拟ajax请求后台数据，这里是5秒，map.spin(true)则显示加载效果，为false则不显示加载效果
var layer = L.geoJson().addTo(map);
//设置为true则显示加载效果
map.spin(true);
// Simulate AJAX
//模拟ajax请求数据，5秒返回数据
setTimeout(function () {
layer.addData(campus);
//设置为false则不显示加载效果
map.spin(false);
}, 5000);5、完整示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet实现地图加载等待效果</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="./js/spin.js"></script>
<script type="text/javascript" src="./js/leaflet.spin.min.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([39.743855, -104.998158], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ''
}).addTo(map);
var campus = {
type: "Feature",
properties: {
popupContent: "This is the Auraria West Campus",
style: {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: .8
}
},
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.7462000683517],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.0007152557373, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],
[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],
[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
};
var layer = L.geoJson().addTo(map);
//设置为true则显示加载效果
map.spin(true);
// Simulate AJAX
//模拟ajax请求数据，5秒返回数据
setTimeout(function () {
layer.addData(campus);
//设置为false则不显示加载效果
map.spin(false);
}, 5000);
</script>
</body>
</html>