Как использовать пользовательские значки на слое листовка-всеядное существо?

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.Я также проверил бы, что L.Layer на самом деле L.Marker перед вызовом любой L.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.Я предлагаю вам ознакомиться с учебником Leaflet по GeoJSON , чтобы ознакомиться с этим.

Поэтому вместо того, чтобы полагаться на обработчик событий 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);

Answer 2

Я не так часто использовал листовку, но я сделал небольшой проект, в котором я установил значки для изображения.

var redIcon = L.icon({
    iconUrl: 'red-x.png',

   iconSize:     [25, 25], // size of the icon
   iconAnchor:   [12, 55], // point of the icon which will correspond to 
   marker's location
   popupAnchor:  [-3, -76] // point from which the popup should open 
   relative to the iconAnchor
});


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

Не уверен, насколько это полезно на самом деле.

Ссылкиесть руководство для подражания, которое может быть более полезным https://leafletjs.com/examples/custom-icons/