如何使用 Leaflet 为 Leaflet Realtime 插件设置自定义图标？答案

【问题标题】：How to set custom icon for Leaflet Realtime plugin with Leaflet?如何使用 Leaflet 为 Leaflet Realtime 插件设置自定义图标？
【发布时间】：2015-03-06 12:52:03
【问题描述】：

我是 Leaflet JS 的新手。我正在尝试找出一种方法来更改 Leaflet Realtime 插件中使用的 L.Geojson 标记的默认样式。我不知道要更改什么属性才能更改标记的样式。

到目前为止，这是我的代码：

    var map = L.map('map', {center: [46.4337, 23.4532], zoom: 8}),
    realtime = L.realtime({
        url: 'get_points.php',
        crossOrigin: true,
        type: 'json'
    }, {
        interval: 500
    }).addTo(map);
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(osm);

function update(e) {
    realtime.update(JSON.parse(e.data));
}

function remove(e) {
    realtime.remove(JSON.parse(e.data));
}
realtime.on('update', function(e) {
        popupContent = function(fId) {
            var feature = e.features[fId],
                my_number = feature.properties.number;
                mystatus = feature.properties.mystatus;
            return ('My number is: '+ my_number + '<br />' + 'Status: ' + mystatus) ;
        },
        bindFeaturePopup =  function(fId) {
            realtime.getLayer(fId).bindPopup(popupContent(fId));
        },
        updateFeaturePopup = function(fId) {
            realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
        };
        


    Object.keys(e.enter).forEach(bindFeaturePopup);
    Object.keys(e.update).forEach(updateFeaturePopup);
});

我尝试使用自定义图标标记设置 pointToLayer 函数，但没有成功。
谢谢。

【问题讨论】：

标签： javascript leaflet geojson markers

【解决方案1】：

pointToLayer 函数有效，就像您可以与 L.GeoJSON 一起使用的所有其他选项一样：

你基本上可以用 L.Realtime 做任何你能用 L.GeoJSON 做的事情 - 样式、onEachFeature、获取边界等。

如果您在选项对象中使用pointToLayer 方法（我猜您尝试在源对象中使用它或犯了一个错误），您可以使用您自己的自定义L.Icon 返回一个L.Marker：

var realtime = L.realtime({
    url: 'https://wanderdrone.appspot.com/',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            'icon': L.icon({
                iconUrl: '//leafletjs.com/docs/images/leaf-green.png',
                shadowUrl: '//leafletjs.com/docs/images/leaf-shadow.png',
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            })
        });
    }
}).addTo(map);

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/NmtcUa?p=preview

教程：http://leafletjs.com/examples/custom-icons.html

pointToLayerreference：http://leafletjs.com/reference.html#geojson-pointtolayer

L.Icon参考：http://leafletjs.com/reference.html#icon

【讨论】：

感谢您的详细解答，确实是我第一次尝试时出错了。现在，我设法更改了图标，但是当 json 更改时，图标颜色不会根据属性而改变。有任何想法吗？这是代码：pointToLayer: function (feature, latlng) { return L.marker(latlng, { 'icon': new L.AwesomeNumberMarkers({ number: feature.properties.number, markerColor: feature.properties.mystatus.toLowerCase() }) });
在页面刷新标记颜色改变，但它不会实时改变。
不，谢谢，随时欢迎您，这就是 SO 的用途。但是，您可以接受答案，以便其他有类似问题的人也可以找到可接受的解决方案。请参阅：stackoverflow.com/help/someone-answers。关于您的新问题，这有点离题，而不是 cmets 的含义和适用范围。如果您针对您的问题发布新问题，我们很乐意为您提供帮助。

【解决方案2】：

使用插件页面上给出的示例，我设法使用 pointToLayer 设置标记的样式。您只需在包含间隔选项的括号内添加函数。

var realtime = L.realtime({
    url: 'https://wanderdrone.appspot.com/',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

这是 JSFiddle 上的一个工作示例： http://jsfiddle.net/4usvq7ky/

【讨论】：