如何在单张杂食店图层上使用自定义图标？

Question

我正在尝试更改我的KML图层之一的默认标记。我为此使用小叶杂食动物。

这是我已经拥有的代码。即使img位在代码中，标记也不会更改为图像，并且图层控件仅显示文本。

标记代码：

var redIcon = L.icon({
    iconUrl: 'icon.png',
    iconSize:     [20, 24],
    iconAnchor:   [12, 55], 
    popupAnchor:  [-3, -76] 
});

var nissanLayer = omnivore.kml('icons.kml')
    .on('ready', function() {
        map.fitBounds(customLayer.getBounds());
         //change the icons for each point on the map
         // After the 'ready' event fires, the GeoJSON contents are accessible
        // and you can iterate through layers to bind custom popups.
        customLayer.eachLayer(function(layer) {
            // See the `.bindPopup` documentation for full details. This
            // dataset has a property called `name`: your dataset might not,
            // so inspect it and customize to taste.
            layer.icon
            layer.bindPopup('<img src="icon.png" height="24"><br><h3>'+layer.feature.properties.name+'</h3>');
        });
    })
.addTo(map);


  var marker = new L.Marker(customLayer, {icon:redIcon});
      map.addLayer(marker);

Answer 1

您似乎忽略了的setIcon()方法L.Marker。我还要在调用任何功能之前检查a L.Layer实际上是否为a ，仅仅是为了保证代码的完整性。例如：L.MarkerL.Marker

var redIcon = L.icon({ /* ... */ });

var omnivoreLayer = omnivore.kml('icons.kml')
    .on('ready', function() {
        omnivoreLayer.eachLayer(function(layer) {

            if (layer instanceof L.Marker) {
                layer.setIcon(redIcon);
            }
        });
    })
    .addTo(map);

但是，Leaflet-Omnivore文档说，将自定义样式应用于Omnivore图层的更好方法是创建L.GeoJSON具有所需过滤器和样式的实例，然后将其传递给Omnivore工厂方法。我建议您阅读有关GeoJSON的Leaflet教程以熟悉它。

因此，无需依赖on('ready')事件处理程序（后者会在创建标记后对其进行更改），而是通过直接使用所需样式创建标记来节省一点时间：

var omnivoreStyleHelper = L.geoJSON(null, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: redIcon});
    }
});

var omnivoreLayer = omnivore.kml('icons.kml', null, omnivoreStyleHelper);