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

9

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:

Polígono

Mas os marcadores não mudam de cor:

Marcadores

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:

Alvo

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

Kyle Pennell
fonte
2
Você deve conferir o Leaflet.StyleEditor no GitHub. Demorei um pouco para descobrir como fazer a demonstração funcionar, mas 1) clique na ferramenta Estilo, 2) clique no marcador, 3) ponto-chave ... altere a configuração do ícone para algo diferente do padrão, 4) selecione cor. Voila! Muito liso.
RyanKDalton
E o Leaflet StyleEditor faz sua mágica fornecendo ao ícone um URL da Mapbox deste formato: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png , em que ffc871 é a sequência de cores hexadecimais. Aparentemente, pode ser qualquer string hexadecimal de seis dígitos! Mas provavelmente é melhor fazer isso usando o MakiMarkers, que parece ter sido projetado para essa finalidade: github.com/jseppi/Leaflet.MakiMarkers
LarsH

Respostas:

6

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

insira a descrição da imagem aqui

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

Duncan Rager
fonte
8

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

Kyle Pennell
fonte
5

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);
Benno
fonte
1
Kyle Pennell tem uma grande pergunta e resposta aqui;)
Kyle Pennell
2

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'
Ricky
fonte
Então isso muda apenas a cor do plano de fundo? Você pode dar um exemplo de como isso seria para um ícone típico?
LarsH
1
@ LarsH, Sim, isso mudaria o plano de fundo (coloque um quadrado verde atrás do ícone de lágrima azul). Infelizmente, você não pode simplesmente mudar a cor do preenchimento. Como outros já apontaram, o ícone não possui uma propriedade de cor. É apenas uma imagem (jpg ou png) e você precisa trocar a imagem inteira.
JMers