Как перезагрузить CSV-маркер, используя ominvore на mapbox - PullRequest
Новая
       19

Как перезагрузить CSV-маркер, используя ominvore на mapbox

0 голосов
/ 10 февраля 2020

Я новичок в кодировании, и я хочу спросить, есть ли способ перезагрузить маркеры mapbox из файла CSV, используя omnivore.csv

Я взял этот пример из mapbox . js здесь

Я попытался обернуть omnivore.csv в функцию и использовать setInterval, но это приведет к тому, что маркеры будут накладываться друг на друга.

Я хотел обновлять / перезагружать маркеры каждые 4 минуты. пока у меня есть это: 

<script src='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.css' rel='stylesheet' />

<div id='map' style="height: 680px; width: 100%"></div>

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiamhlcmVpcmEiLCJhIjoiY2p2aGxrajBqMDR5cDQzbzBrdTNqdmRteCJ9.tPKc_EYywojs5R-KEcKLGg'
map = L.mapbox.map('map')
map.setView([12.51602, -69.9719], 12);
L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11').addTo(map);

var geojsonLayer = L.geoJson().addTo(map);
omnivore.csv('nodes.csv', null, geojsonLayer)

 .on('ready', function () {

       this.eachLayer   ( function  (marker) {

             if (marker.toGeoJSON().properties.status === 'Online') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#29A912',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Offline') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#be2626',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Warning') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#E7BA14',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Ranged') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#1487E7',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Bandwidth') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#8114E7',
                      'marker-size': 'small'
                  }));
              }

              else {
                  marker.setIcon(L.mapbox.marker.icon({}));
              }

              marker.bindPopup(marker.toGeoJSON().properties.title + ', ' +
                  marker.toGeoJSON().properties.status);
      })
  })

</script>

мой CSV-файл выглядит так:

"широта", "долгота", "заголовок", "статус"
"12.5218966025141", "-70.0345627016134", "MN BLUE CONDO", "Online"
"12.5478471267241", "- 70.057234261884", "MN OCEANIA", "Online"
"12.47255415072", "- 69.960976765474", "MN F "," Online "
" 12.5347423282743 "," - 70.0194866667518 "," MN SP FCCA "," Online "

1 Ответ

0 голосов
/ 10 февраля 2020

Очистите слой geojsonlay перед перезагрузкой маркеров. 

var geojsonLayer = L.geoJson().addTo(map);
loadCSV();
setTimeout(function(){
     loadCSV();
  })
}, 4*60*100); //4min

function loadCSV(){
geojsonLayer.clearLayers()
omnivore.csv('nodes.csv', null, geojsonLayer)

 .on('ready', function () {

       this.eachLayer   ( function  (marker) {

             if (marker.toGeoJSON().properties.status === 'Online') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#29A912',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Offline') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#be2626',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Warning') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#E7BA14',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Ranged') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#1487E7',
                      'marker-size': 'small'
                  }));
              }

              else if (marker.toGeoJSON().properties.status === 'Bandwidth') {

                  marker.setIcon(L.mapbox.marker.icon({
                      'marker-color': '#8114E7',
                      'marker-size': 'small'
                  }));
              }

              else {
                  marker.setIcon(L.mapbox.marker.icon({}));
              }

              marker.bindPopup(marker.toGeoJSON().properties.title + ', ' +
                  marker.toGeoJSON().properties.status);
      })
}
...