Como alterar a cor do marcador de folheto durante o mouseover?

Estou tendo dificuldade para descobrir por que o método Leaflet setstylemudará a cor de um polígono, mas não a cor dos meus marcadores.

O polígono funciona bem:

Mas os marcadores não mudam de cor:

Quero poder passar o mouse sobre um marcador e mudar sua cor. Parecia que setStyle faria isso. Mas eu continuo recebendolayer.setStyle is not a function

Estou usando Angular e Leaflet juntos para fazer o mapa (estou usando a diretiva angular-leaflet).

Aqui está a parte do mouse sobre o código:

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

Quando o marcador é pointMousevercolocado sobre o mouse , ele dispara e tenta invocar setStyle no LeafletEvent.target. Eu console.logged o LeafletEvent e existe realmente a parte Target:

Por que o setStyle funcionaria para o polígono e não para o marcador? Como alterar a cor do marcador?

Parece que você não pode fazer isso porque um marcador usa uma imagem para renderizar.

Eu acho que você precisaria pegar a classe de ícone do seu marcador e alterar o atributo "iconUrl" para a nova imagem que desejar.

Fonte: Referência da API do Leaflet

Espero que ajude,

DR

Descobri isso graças a algumas leituras da documentação.

O polígono no folheto responde, setStylemas o marcador pode ser alterado usandosetIcon

Documentação para setIcon

Veja a resposta de Kyle Pennell:

O polígono no folheto responde a setStyle, mas o marcador pode ser alterado usando setIcon

Você pode usar as seguintes linhas:

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);

Você pode fazer isso sem precisar criar um milhão de imagens de ícone diferentes se usar CSS.

1. Adicione o marcador
2. encontre o atributo backgroundcolor para o css e altere-o.

Aqui está:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'

Combinando a resposta de Ricky com /programming/7415872/change-color-of-png-image-via-css , podemos fazer algo como:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.filter = 'hue-rotate(180deg)';

Você também pode brincar com saturate()e brightness()obter mais cores.

Conforme mencionado na resposta a essa pergunta, ele não é suportado em todos os navegadores: https://caniuse.com/#feat=css-filters