Wie ändere ich die Farbe der Flugblattmarkierung beim Mouseover?

9

Es fällt mir schwer herauszufinden, warum die Leaflet-Methode setstyledie Farbe eines Polygons ändert, aber nicht die Farbe meiner Marker.

Polygon funktioniert gut:

Polygon

Die Markierungen ändern jedoch nicht die Farben:

Marker

Ich möchte in der Lage sein, einen Marker mit der Maus zu bewegen und seine Farbe zu ändern. Es schien, als würde setStyle dies tun. Aber ich bekomme immerlayer.setStyle is not a function

Ich verwende Angular und Leaflet zusammen, um die Karte zu erstellen (ich verwende die Angular-Leaflet-Direktive).

Hier ist der Mouseover-Teil des Codes:

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

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

Wenn der Marker mit der Maus darüber bewegt wird, wird er ausgelöst pointMouseverund versucht dann, setStyle auf dem LeafletEvent.target aufzurufen. Ich habe console.logged das LeafletEvent und es gibt tatsächlich den Zielteil davon:

Ziel

Warum sollte setStyle für das Polygon und nicht für den Marker funktionieren? Wie kann man die Farbe des Markers ändern?

geojson markers leaflet

— Kyle Pennell
quelle

2

Sie sollten Leaflet.StyleEditor auf GitHub auschecken . Ich habe eine Weile gebraucht, um herauszufinden, wie die Demo funktioniert, aber 1) klicken Sie auf das Stil-Werkzeug, 2) klicken Sie auf die Markierung, 3) klicken Sie auf den Schlüsselpunkt ... ändern Sie die Symboleinstellung auf etwas anderes als die Standardeinstellung, 4) wählen Sie Farbe. Voila! Ziemlich schlau.

— RyanKDalton

Und der Leaflet StyleEditor macht seine Magie, indem er dem Symbol eine Mapbox-URL dieser Form gibt: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png , wobei ffc871 die hexadezimale Farbzeichenfolge ist. Anscheinend kann es sich um eine sechsstellige Hex-Zeichenfolge handeln! Aber wahrscheinlich ist dies am besten mit MakiMarkers möglich, der anscheinend für diesen Zweck entwickelt wurde: github.com/jseppi/Leaflet.MakiMarkers

— LarsH

6

Scheint, als könnten Sie das nicht tun, weil ein Marker ein Bild zum Rendern verwendet.

Geben Sie hier die Bildbeschreibung ein

Ich glaube , Sie müssen das packen Symbol Klasse Ihres Marker und die „iconUrl“ -Attribut auf , was Sie wollen neues Bild ändern.

Quelle: Faltblatt-API-Referenz

Ich hoffe, das hilft,

DR

— Duncan Rager
quelle

8

Ich habe es dank einiger Dokumentationslesungen herausgefunden.

Das Polygon in der Packungsbeilage reagiert auf, setStyleaber die Markierung kann mit geändert werdensetIcon

Dokumentation für setIcon

— Kyle Pennell
quelle

5

Siehe Kyle Pennells Antwort:

Das Polygon in der Packungsbeilage reagiert auf setStyle, aber die Markierung kann mit setIcon geändert werden

Sie können folgende Zeilen verwenden:

// 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
quelle

1

Kyle Pennell hat eine tolle Frage und Antwort hier;)

— Kyle Pennell

2

Sie können dies tun, ohne eine Million verschiedener Symbolbilder erstellen zu müssen, wenn Sie CSS verwenden.

Fügen Sie den Marker hinzu
Suchen Sie das Hintergrundfarbenattribut für das CSS und ändern Sie es.

Hier ist es:

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

— Ricky
quelle

Das ändert also nur die Hintergrundfarbe? Können Sie ein Beispiel geben, wie das für ein typisches Symbol aussehen würde?

— LarsH

1

@LarsH, Ja, dies würde den Hintergrund ändern (ein grünes Quadrat hinter das blaue Teardrop-Symbol setzen). Leider können Sie die Füllfarbe nicht einfach ändern. Wie andere bereits betont haben, hat das Symbol keine Farbeigenschaft. Es ist nur ein Bild (jpg oder png) und Sie müssen das gesamte Bild austauschen.

— JMers

1

Wenn wir Rickys Antwort mit /programming/7415872/change-color-of-png-image-via-css kombinieren , können wir Folgendes tun:

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

Sie können auch mit saturate()und spielen brightness(), um mehr Farben zu erhalten.

Wie in der Antwort auf diese Frage erwähnt, wird es nicht in allen Browsern unterstützt: https://caniuse.com/#feat=css-filters

— Evan Battaglia
quelle