Me cuesta entender por qué el método de folleto setstyle
cambiará 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 pointMousever
y 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?
Respuestas:
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
fuente
Lo descubrí gracias a la lectura de algunos documentos.
El polígono en el folleto responde
setStyle
pero el marcador se puede cambiar usandosetIcon
Documentación para setIcon
fuente
Ver la respuesta de Kyle Pennell:
Puede usar las siguientes líneas:
fuente
Puede hacerlo sin tener que crear un millón de imágenes de iconos diferentes si usa CSS.
Aquí está:
fuente
Combinando la respuesta de Ricky con /programming/7415872/change-color-of-png-image-via-css , podemos hacer algo como:
También puedes jugar con
saturate()
ybrightness()
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
fuente