Question

我需要为一些JSON数据添加一个自定义图标，我将其放入带有leaflet-ajax（https://github.com/calvinmetcalf/leaflet-ajax）的传单地图中，但无法弄清楚如何操作。

有什么建议吗？以下是我获取数据的方式：

var geojsonLayerIncidents = new L.GeoJSON.AJAX("http://131940.qld.gov.au/api/json/v1/events/incident");
var geojsonLayerRoadworks = new L.GeoJSON.AJAX("http://131940.qld.gov.au/api/json/v1/events/roadworks");

geojsonLayerIncidents.addTo(map);
geojsonLayerIncidents.bindPopup("<b>Incident or accident</b><p>Avoid if possible<p>");
geojsonLayerRoadworks.addTo(map);
geojsonLayerRoadworks.bindPopup("<b>Roadworks</b><p>Avoid if possible");

我想为事件设置一个图标，为道路工程设置另一个图标

Answer 1

嗯，在您的方案中可以有其他最佳方式使用自定义图标。但就目前而言，你可以尝试这种方式

首先创建一个像这样的自定义图标

var baseballIcon = L.icon({
    iconUrl: 'http://leafletjs.com/examples/baseball-marker.png',
    iconSize: [32, 37],
    iconAnchor: [16, 37],
    popupAnchor: [0, -28]
});

现在，修改您添加Ajax的方式，如下所示

var geojsonLayerIncidents = new L.GeoJSON.AJAX("http://131940.qld.gov.au/api/json/v1/events/incident",{
                                middleware:function(data){
                                   return L.geoJson(data, {
                                      onEachFeature: function (feature, layer) {
                                        layer.setIcon(baseballIcon);
                                      }
                                    }).addTo(map);
                                }
                            });

这是一个有效的fiddle

将自定义图标添加到leaflet-ajax数据

1 个答案: