Leaflet: Rotation von Markern

Erstellt am 20. Juni 2011  ·  24Kommentare  ·  Quelle: Leaflet/Leaflet

Featureanfrage. Lassen Sie die Markierungen rotieren.

Die Markierungen, die ich auf der Karte anzeige, haben eine Ausrichtung, und es wäre schön, eine einfache Möglichkeit zu haben, die Markierung in diese Ausrichtung zu drehen. Derzeit ergreife ich das img-Tag und wende eine CSS3-Transformation mit jquery an, wenn sich die Ausrichtung ändert.
Es funktioniert, aber es ist hacky und es gibt andere Webkit-Transformationen, die das Tag bereits angewendet haben.

$(marker._icon).css('-webit-transform','rotate(90deg)')

Es wäre schön, wenn dies in das Framework eingebaut wäre.

feature later

Hilfreichster Kommentar

Hallo @Deilan ,

Danke für deine Nachricht.

Es scheint mir, dass das Leaflet Rotated Marker -Plugin von @bbecquet den Job macht ( Demo ).
Sie _könnten_ auch an anderen Plugins interessiert sein, zB leaflet.orienterMarker .

Die Philosophie des IMHO Leaflet-Projekts besteht darin, die gängigsten Funktionen im Kern bereitzustellen und spezifischere Funktionen an Plugins zu delegieren.
Daher klingt es nach einer angemessenen Situation, diese Funktion in einem Plugin zu haben.

Ich werde Rotated Marker zur Plugin-Liste hinzufügen und diese Feature-Anfrage als geschlossen markieren.

Der Vollständigkeit halber werde ich PR #2362 als Versuch erwähnen, dieses Feature vor einiger Zeit zusammenzuführen. Leider sieht es so aus, als gäbe es einige Inkompatibilitäten mit alten Browsern und anderen Anpassungen (Transparenz…).
Es wurde wegen Inaktivität geschlossen, aber Sie können es gerne wiederbeleben, wenn Sie den Code für die aktuelle Version des Prospekts aktualisieren können!

Alle 24 Kommentare

Nettes Feature! Benötigt jedoch eine komplexere Handhabung im IE ... Ich werde darüber nachdenken. Danke!

Es wäre schön, diese Funktion auch für geoJSON-generierte Markierungen als Eigenschaft zu haben. Ich habe einige Probleme mit dieser Art von Rotation mit den obigen Problemumgehungen (oder in dem anderen Thread), und sie ist möglicherweise immer noch nicht so optimiert wie a eingebaute Funktion wäre.
In meinem Fall liefern geoJSON-Daten die Route von GPS-Trackern, die sich als Polylinien manifestieren, um ihren Pfad entlang anzuzeigen, und Markierungen für jedes Tracker-Berichtsereignis - ich versuche, diese Markierungen (Pfeile) zu drehen, wie die Überschrift des Berichts sagt.

Gibt es einen Grund, https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js nicht in L.Marker zusammenzuführen?

Es gibt auch https://github.com/jacobtoye/Leaflet.transformmarker , wenn Sie sich nicht für alte Browser interessieren

Die PolylineDecorator-Markierungsrotationsimplementierung von @bbecquet ist eigentlich ziemlich nett, also könnten wir erwägen, sie in den Leaflet-Kern zu verschieben.

Ich bin auch auf der Suche nach drehbaren Markern. Ist #2362 weit davon entfernt, fusioniert zu werden?

:+1: Das. Es wäre süß.

+1

+1

+1

+1

Irgendwelche neuen Informationen seit 2013?

Ja, es gibt einige hackige Problemumgehungen, aber es wäre schön, diese eingebaute Funktion zu unterstützen.

+1

+1

Ich habe alle drei der folgenden Lösungen ausprobiert. Da ich keine Kompatibilität mit alten Browsern benötige, habe ich mich für den einfachsten (jacobtoye) entschieden. Aber das Problem, das ich gefunden habe, war, dass PopUp-Kommentare unter:

            var myIcon = L.icon({
                iconUrl: 'images/carCursor.png',
                iconSize: [64, 64],
                iconAnchor: [30, 20],
                popupAnchor: [30, -32]
            });

werden ebenfalls gedreht, und dies führt dazu, dass das Popup meinen Marker verdeckt (der Inhalt des Popups umfasst etwa 12 Textzeilen.

https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js

https://github.com/shramov/leaflet-plugins/blob/master/layer/Marker.Rotate.js

https://github.com/jacobtoye/Leaflet.transformmarker/blob/master/Leaflet.transformmarker.js

Hallo!
Ich kam gerade mit einer einfacheren, eleganteren Implementierung, getrennt von meinem alten PolylineDecorator-Code. Vielleicht möchten Sie es sich ansehen: https://github.com/bbecquet/Leaflet.RotatedMarker.

( @DrYSG nicht sicher, ob ich Ihr Problem mit dem Popup verstanden habe, aber in diesem Code wird das Popup nicht gedreht).

Auf jeden Fall glaube ich nicht, dass diese Rotationsfunktion jemals in Leaflet durchgeführt werden könnte, solange die IE7/8-Unterstützung eine Voraussetzung ist (die alten IE-Workarounds sind ein Albtraum, und IIRC können nicht alle Fälle erfüllen).
Aber dafür sind Plugins da :)

@bbecquet
Es ist nicht so, dass das Pop-up gedreht wird. Da das Symbol jedoch gedreht wird, scheint sich auch der Anker sowie der Popup-Offset zu drehen. Was also passiert, ist, dass das Pop-up vertikal ist, aber es ist länger -30 vom Anker entfernt, aber jetzt tiefer im Bildschirm, sodass es mein Symbol verdeckt. (Ich habe die eigentliche Glyphe nicht im L.icon zentriert, ich werde das als nächstes versuchen.

Übrigens arbeite ich oft mit US-Regierungskunden zusammen. Sie können bei Upgrades sehr langsam sein (Richtlinien, Bürokratie, Zertifizierungsprozesse). Das Zeug ist wirklich alt. Aber selbst dann bin ich nur auf IE9 gestoßen und nicht mehr auf IE 7/8 (IE9 ist auch schlecht, es wurde wirklich erst mit IE10 besser).

@bbecquet

Ich habe Ihren neuen Marker ausprobiert und er funktioniert perfekt. Popup funktioniert auch korrekt. Rotationsursprung auf den wahren Mittelpunkt der Glyphe in Pixel setzen. Das war wohl das Problem.

@DrYSG Danke für das Feedback. Schön zu wissen, dass es dir geholfen hat!

https://github.com/bbecquet/Leaflet.RotatedMarker Plugin hat bei mir mit Beta 2 funktioniert - danke @bbecquet

Ich frage mich, warum dieser immer noch nicht implementiert ist.

Hallo @Deilan ,

Danke für deine Nachricht.

Es scheint mir, dass das Leaflet Rotated Marker -Plugin von @bbecquet den Job macht ( Demo ).
Sie _könnten_ auch an anderen Plugins interessiert sein, zB leaflet.orienterMarker .

Die Philosophie des IMHO Leaflet-Projekts besteht darin, die gängigsten Funktionen im Kern bereitzustellen und spezifischere Funktionen an Plugins zu delegieren.
Daher klingt es nach einer angemessenen Situation, diese Funktion in einem Plugin zu haben.

Ich werde Rotated Marker zur Plugin-Liste hinzufügen und diese Feature-Anfrage als geschlossen markieren.

Der Vollständigkeit halber werde ich PR #2362 als Versuch erwähnen, dieses Feature vor einiger Zeit zusammenzuführen. Leider sieht es so aus, als gäbe es einige Inkompatibilitäten mit alten Browsern und anderen Anpassungen (Transparenz…).
Es wurde wegen Inaktivität geschlossen, aber Sie können es gerne wiederbeleben, wenn Sie den Code für die aktuelle Version des Prospekts aktualisieren können!

@ghybs Danke für eine gründliche Erklärung!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen