如何在 mapbox 上使用 ominvore 重新加载 csv 标记

Question

我是编码新手，我想问一下是否有一种方法可以使用 omnivore.csv

从 csv 文件重新加载 mapbox 标记

我从 mapbox.js here

中获取了这个例子

我试图将 omnivore.csv 包装在一个函数中并使用 setInterval 但这会导致标记相互堆叠。

我想 refresh/reload 每 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”，“在线”
“12.5478471267241”，“-70.057234261884”，“MN OCEANIA”，“在线”
“12.47255415072”，“-69.960976765474”，“MN SB FCCA”，“在线”
“12.5347423282743”，“-70.0194866667518”，“MN SP FCCA”，“在线”

Answer 1

在重新加载标记之前清除 geojsonlayer。

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);
      })
}

如何在 mapbox 上使用 ominvore 重新加载 csv 标记

How to reload csv marker using ominvore on mapbox

javascript

csv

leaflet

mapbox