Leaflet Realtime GeoJSON 动态标记颜色变化答案

【问题标题】：Leaflet Realtime GeoJSON dynamic marker color changeLeaflet Realtime GeoJSON 动态标记颜色变化
【发布时间】：2015-03-07 12:34:52
【问题描述】：

我有一张使用 Leaflet 构建的地图，它使用 Leaflet-Realtime 插件和 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中的属性实时更改标记的颜色。有什么想法吗？

【问题讨论】：

您能添加一个 GeoJSON 样本吗？
当然，这里是：'{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point" ,"坐标":[23.588973,46.772968]},"属性":{"id":198,"mynumber":"195","status":"RED"}}]}'

标签： javascript real-time leaflet geojson

【解决方案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

【讨论】：

你说得对，它有效，但我必须为此声明一个函数，代码如下：realtime.on('update', function(e) { updateFeatureIcon = function (fId) { var feature = e.features[fId], mynumber = feature.properties.mynumber; status = feature.properties.status; realtime.getLayer(fId).setIcon(new L.AwesomeNumberMarkers({ number: mynumber, markerColor: status.toLowerCase() })); }; Object.keys(e.update).forEach(updateFeatureIcon); });