2015-07-14 3 views
0

Как я могу показать центрированный индикатор выполнения карты (с%) во время ожидания отображения слоя на карте?Индикатор выполнения для карты лифтов

Вот мой код:

<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> 

Спасибо!

ответ

1

Для этого пока нет встроенного или подключенного решения. Так

  • если прогресс-бар и % не так уж важно, и вы в основном хотят, чтобы сообщить пользователю, что загрузка что-то вы можете захотеть взглянуть на Leaflet.Spin, который представляет собой плагин для показа вращающийся значок на вашей карте.
  • Если вы действительно хотите индикатор хода, хорошей отправной точкой может быть markercluster -plugin. У 50k example есть такой индикатор прогресса.
+0

благодарит за ответ. Я попробовал листок.spin, но он не работает. Я обновил код. –

Смежные вопросы