Question

我在bootleaf中使用传单在每小时更新的地图上绘制天气信息。我使用leaflet-realtime.js来更新天气信息。天气数据存储在Geojson文件中。 Bootleaf有一个侧边栏和它自己的弹出窗口，用于显示有关点击标记的信息。当我使用realtime更新Geojson时，位置会更新（例如移动船只），但弹出窗口的内容却没有。我想知道的是如何实现这个起诉实时和实时.on

以下是使用实时的代码的一部分：

var tangaroa_stations = L.realtime({
    url: 'http://url/tangaroa_position_test.geojson',
    crossOrigin: false,
    type: 'json'
},
{
  interval: 10 * 1000,
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "assets/img/tangaroa.png",
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = layer.feature.properties.INFO;
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });

        $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="assets/img/fire.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>'); 

      tangaroa_stationSearch.push({
        name: layer.feature.properties.NAME,
        stn_id: layer.feature.properties.STN_ID,
        source: "TangaroaStations",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});


tangaroa_stations.on('update', function(e) {
/*   No idea what to do here */
});

我想要更新的是这些html内容以及来自更新的Geojson的数据：

$("#feature-title").html(feature.properties.NAME);
$("#feature-info").html(content);

更新Geojson后，新位置在地图上工作，但html内容与之前的Geojson内容保持一致，而不是当前内容。

似乎每次使用附加时都会创建一个新ID，并且该ID没有任何与之关联的内容。在bootleaf侧边栏上，由于更新，我每隔10秒就会收到一个新条目。这些新条目没有与之关联的任何html内容，只有原始的第一个。

Bootleaf使用list.js创建列表，它有一个名为syncSidebar的函数。我确实删除了追加并尝试仅使用syncSidebar，但只显示侧栏中的oringal条目，它是指向原始Geojson内容的链接。

以下是Geojson的样本

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 0, "properties": { "STN_ID": 1, "NAME": "Ship", "STATUS": 1, "INFO": "<table style='border: 1px solid #000; padding: 5px; border-collapse: collapse;'><tr><th style='border: 1px solid #000; padding: 5px;'>Validity Time</th><td style='border: 1px solid #000; padding: 5px;'>2018-03-13 18:00:00 UTC</td></tr><tr><th style='border: 1px solid #000; padding: 5px;'>Air Temperature</th><td style='border: 1px solid #000; padding: 5px;'>0.1 C</td></tr><tr><th style='border: 1px solid #000; padding: 5px;'>Wind Speed</th><td style='border: 1px solid #000; padding: 5px;'> 45.9 knots</td></tr><tr><th style='border: 1px solid #000; padding: 5px;'>Wind Direction</th><td style='border: 1px solid #000; padding: 5px;'> 163.0 (True Degrees)</td></tr><tr><th style='border: 1px solid #000; padding: 5px;'>Pressure</th><td style='border: 1px solid #000; padding: 5px;'> 964.9 hPa</td></tr></table>", "DATETIME": "2018-03-13 18:00:00", "WS": 45.9, "WD": 190.0, "AT": 0.1, "PR": 964.9}, "geometry": { "type": "Point", "coordinates": [ somewhere_lon, somewhere_lat ] } }

]
}

有没有人有任何想法？

使用实时和传单更新功能

0 个答案: