场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上，怎样使用插件实现地图加载等待效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-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/leaflet@1.7.1/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/leaflet@1.7.1/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>

Leaflet中使用Leaflet.Spin插件实现地图加载等待效果相关推荐

Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现要素轨迹移动效果. 插 ...
Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现水流模拟效果. 水流模 ...
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面加载地 ...

Leaflet中使用Leaflet.Spin插件实现地图加载等待效果

场景

实现

Leaflet中使用Leaflet.Spin插件实现地图加载等待效果相关推荐

最新文章

热门文章