javascript - 单张 map 进度条-6ren

javascript - 单张 map 进度条

转载作者：行者123 更新时间：2023-12-03 09:33:35

27

4

在等待 map 上渲染图层时，如何显示居中的 map 进度条(带有 %)？

这是我的代码:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
</head>
<body>
<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">TF.Landscape</a>&nbsp;|<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')">TF.Outdoors</a>
<div id="map" style="width: 640px; height: 480px"></div>
<progress value="0" max="100"></progress> 

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
    var map;
    var tileLayer;
    function showMap (layerURL) {
        if(!map) { 
          map = L.map('map').setView([19.5, -73], 7); 
        }

        tileLayer = L.tileLayer(layerURL, {
              attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
              maxZoom: 18
            });
        //map.addLayer(tileLayer);  

        map.spin(true);
            setTimeout(function () {
                map.addLayer(tileLayer);    
                map.spin(false);
           }, 3000);


    }
</script>

谢谢!

最佳答案

目前还没有内置或插入的解决方案。所以

如果进度条和%不是那么重要，并且您主要想告诉用户正在加载某些内容，您可能需要查看Leaflet.Spin这是一个用于在 map 上显示旋转图标的插件。
如果您确实想要进度条，markercluster 插件可能是一个很好的起点。 50k example有这样的进度条。

关于javascript - 单张 map 进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31411209/

27

4

0

文章推荐： javascript - 最高效的虚线矩形的方法

文章推荐： javascript - JQuery 更改数据表的属性

文章推荐： javascript - 通过 Google 地方信息显示当前位置

leaflet - 单张:反向/反向多边形样式
我有一个geojson格式的省界多边形。我想要的是在 map 上显示该省份，使非省份区域显示为灰色(不透明)，而省份区域显示为不带样式。我怎样才能做到这一点？最佳答案从Polygon api do
javascript - 单张 map 进度条
在等待 map 上渲染图层时，如何显示居中的 map 进度条(带有 %)？这是我的代码: TF.Landscape |TF.Outdoors var map;
ios - 单张 Flickr 照片导致荒谬的容量异常
我正在尝试使用 Flickr API 随机抓取一些最近的照片，并且无论我尝试抓取多少图像，都会持续触发以下错误。这是错误: 2013-04-25 20:18:29.032[16774:907] url
dictionary - 单张 map 宽度(以米为单位)
我想要一个在我的传单 map 上创建一个圆圈的按钮。圆应位于 map 中心，直径应为当前显示区域宽度的 75%。要获得中心的 lat 和 lgn 很容易。但我不知道 map 的 75% 是如何以米
javascript - 单张 OSM : Center mapview on polygon
我想生成一个包含 Leaflet 库的 html 文件，以显示带有多边形的 OpenStreetMap View 。 map 上的多边形应居中。为此，我遵循了 this讨论，但我仍然不清楚如何将任意多
python - 单张 : Add the plot legend and select initial zoom
谁能指导我如何将图例添加到 mplleaflet html 图中。其次如何选择初始缩放？在 geopandas 中打开 shapefile 并在交互式网络 map 上绘制属性示例代码: impor

首页

博学

6Ren·AI

商城

javascript - 单张 map 进度条