Estou tendo dificuldade para descobrir por que o método Leaflet setstyle
mudará 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 é pointMousever
colocado 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?
Respostas:
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
fonte
Descobri isso graças a algumas leituras da documentação.
O polígono no folheto responde,
setStyle
mas o marcador pode ser alterado usandosetIcon
Documentação para setIcon
fonte
Veja a resposta de Kyle Pennell:
Você pode usar as seguintes linhas:
fonte
Você pode fazer isso sem precisar criar um milhão de imagens de ícone diferentes se usar CSS.
Aqui está:
fonte
Combinando a resposta de Ricky com /programming/7415872/change-color-of-png-image-via-css , podemos fazer algo como:
Você também pode brincar com
saturate()
ebrightness()
obter mais cores.Conforme mencionado na resposta a essa pergunta, ele não é suportado em todos os navegadores: https://caniuse.com/#feat=css-filters
fonte