Ich versuche, in OpenLayers-3 (OL3) mithilfe von SVG-Bildern "Pin-Drops" (Kartenmarkierungen) zu erstellen.
Momentan verwende ich PNG-Bilder als Pindrops, die auf das ol.style.Icon-Quellenattribut ("src") verweisen. Dies schlägt jedoch fehl, ein SVG-Bild zu verwenden. Gibt es eine andere Möglichkeit, ein SVG auf die gleiche Weise zu verwenden? Vielleicht mit einer Referenz neben ol.style.Icon sogar? Es gibt bereits eine Menge eingebauter SVG in Open Layers, also sollte diese möglich sein , aber ich habe keine Möglichkeit gefunden, dies in OL3 zum Laufen zu bringen. Gibt es eine andere Möglichkeit, dies in OL3 zu tun, die ich berücksichtigen sollte?
Hinweis: Wir haben bereits versucht, eine ol.Vector-Ebene zu verwenden. Wenn der Benutzer jedoch vergrößert bzw. verkleinert wird, vergrößert / verkleinert sich das SVG-Bild, was eine unzureichende Problemumgehung darstellt.
OL3 (fehlgeschlagen):
%Vor%Sehr ähnliche Funktionalität, das folgende Beispiel, das ich online gefunden habe, ist fast perfekt, wenn das Beispiel OpenLayers-2 (OL2) -Funktionalität nicht verwendet hätte, die die openlayers.js-Bibliothek aufruft (statt OL3's ol.js) Bibliothek). Leider ist das Austauschen dieser Javascript-Dateien fehlgeschlagen.
OL2 (funktioniert - aber ist die alte OL-Bibliothek):
Online nach einer Lösung zu suchen, scheint nur andere verwirrte Leute zu erzeugen, die nach einer Lösung suchen.
Bitte helfen Sie,
FreeBeer
Basierend auf der Antwort von @ahocevar können Sie Daten-URIs für SVG verwenden:
%Vor% SVG-Symbole funktionieren einwandfrei, solange der Inhaltstyp Ihrer SVG-Bilddatei image/svg+xml ist. Beachten Sie auch, dass keine externen Referenzen innerhalb des SVG unterstützt werden. OpenLayers 3 verwendet einfach die Funktion drawImage des 2d-Kontexts. Weitere Informationen zu den Anforderungen von SVG-Inhalten finden Sie hier: Ссылка .
Konvertieren Sie das SVG zu Base 64. Dieser ( Link ) hat mir geholfen.
hat die Basis 64 kopiert und in JavaScript als String verwendet.
ZB: var svg = "convertedBase64";
Dann
%Vor%Und Sie sind fertig, vielleicht ein paar Kbs mehr als SVG, aber das hat perfekt für mich funktioniert.
Ich hatte das gleiche Problem, aber nicht einmal das Bild mit dem richtigen Mime-Typ serviert geholfen.
Es hat sich auf den SVG ausgedehnt, die Breite und Höhe nicht richtig definiert.
Ich habe die Attribute width und height zum <svg> -Tag hinzugefügt, wie:
Danach konnte ich meine SVG wie jedes andere Bild verwenden.
Ich hatte auch Probleme, das Symbolbild zu zeigen, Ahocevar Antwort hat mir geholfen löste mein Problem, aber ich musste auch nach dem PHP-Header für SVG suchen Falls Sie oder andere, die diese Antwort sehen, php verwenden, um das SVG zu generieren, müssen Sie die Header-Funktion verwenden, um den Inhaltstyp zu identifizieren.
%Vor%Aufbauend auf SoonDeads Antwort musste ich einen Weg finden, um der Svg die Breite und Höhe hinzuzufügen, ohne die Quelle zu berühren. Mit eckigen, das ist was ich gemacht habe:
%Vor%Es ist ein wenig wortreich, aber es scheint den Job zu machen.
Tags und Links svg openlayers openlayers-3