Leaflet 实时 GeoJSON 动态标记颜色变化

Question

我有一张使用 Leaflet 构建的地图，它使用 Leaflet-Realtime plugin and Leaflet-awesome-numbered-marker 插件显示来自 GeoJSON 的标记。但是我注意到标记颜色不会动态改变，但如果我重新加载页面它会改变。到目前为止，这是代码：

var map = L.map('map', {center: [46.7634, 23.5996], zoom: 14}),
realtime = L.realtime({
    url: 'get_markers.php',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 500,

    pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
        'icon': new L.AwesomeNumberMarkers({
                  number: feature.properties.mynumber, 
                  markerColor: feature.properties.status.toLowerCase()
              })

    });
}
}).addTo(map);

在 feature.properties.status 中是我的标记的颜色代码。我想根据 json 中的属性实时更改标记的颜色。有什么想法吗？

Answer 1

您可以使用 L.Realtime 的 updateFeature 选项。它采用具有三个参数的方法：feature、oldLayer 和 newLayer。在那里只需使用 newLayer 并使用标记的 setIcon 方法：

updateFeature: function (feature, oldLayer, newLayer) {
    newLayer.setIcon(new L.AwesomeNumberMarkers({
        number: feature.properties.mynumber, 
        markerColor: feature.properties.status.toLowerCase()
    }));
}

无法测试，但应该可以。

参考：https://github.com/perliedman/leaflet-realtime#-options

Leaflet 实时 GeoJSON 动态标记颜色变化

Leaflet Realtime GeoJSON dynamic marker color change

javascript

real-time

geojson

leaflet