¿Cómo cambiar el color del marcador de folleto al pasar el mouse?

Me cuesta entender por qué el método de folleto setstylecambiará el color de un polígono pero no el color de mis marcadores.

El polígono funciona bien:

Pero los marcadores no cambiarán de color:

Quiero poder pasar el mouse sobre un marcador y cambiar su color. Parecía que setStyle haría esto. Pero sigo recibiendolayer.setStyle is not a function

Estoy usando Angular y Leaflet juntos para hacer el mapa (estoy usando la directiva angular-leaflet).

Aquí está la parte del código del mouseover:

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

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

Cuando el marcador se mueve, se dispara pointMousevery luego intenta invocar setStyle en el LeafletEvent.target. He console.logged el LeafletEvent y de hecho está la parte de Target:

¿Por qué setStyle funcionaría para el polígono y no para el marcador? ¿Cuál es la forma de cambiar el color del marcador?

Parece que no puedes hacer eso porque un marcador usa una imagen para renderizar.

Creo que necesitaría tomar la clase de icono de su marcador y cambiar el atributo "iconUrl" a la nueva imagen que desee.

Fuente: Referencia API de folleto

Espero que ayude,

DR

Lo descubrí gracias a la lectura de algunos documentos.

El polígono en el folleto responde setStylepero el marcador se puede cambiar usandosetIcon

Documentación para setIcon

Ver la respuesta de Kyle Pennell:

El polígono en el folleto responde a setStyle pero el marcador se puede cambiar usando setIcon

Puede usar las siguientes líneas:

// 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);

Puede hacerlo sin tener que crear un millón de imágenes de iconos diferentes si usa CSS.

1. Agrega el marcador
2. encuentre el atributo backgroundcolor para el css y cámbielo.

Aquí está:

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

Combinando la respuesta de Ricky con /programming/7415872/change-color-of-png-image-via-css , podemos hacer algo como:

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

También puedes jugar con saturate()y brightness()para obtener más colores.

Como se menciona en la respuesta a esa pregunta, no es compatible con todos los navegadores: https://caniuse.com/#feat=css-filters