Wie SVG-Code in Leaflet.js enthalten?

Question

Ich habe einen benutzerdefinierten SVG-Code mit Ebenen im Inneren.

Bis jetzt funktioniert es in einer Webseite, ich kann mit show/hide jQuery Funktionen manipulieren und jetzt möchte ich mit Leaflet integrieren.

Ich habe das Tutorial und die Dokumentation auf Leafletjs.com gelesen. Alle Beispiele sah ich, dass es im Zusammenhang mit Bild zu integrieren oder einen Link für die OpenStreets Karten usw.

Zunächst einmal habe ich wie dies als Beispiel versucht:

<script> 

    // initialize the map 
    var map = L.map('map-test').setView([42.35, -71.08], 13); 

    // load a tile layer 
    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', 
    { 
     attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
     maxZoom: 17, 
     minZoom: 9 
    }).addTo(map); 

</script> 

Das funktioniert gut, es ist Ich habe die Karte angezeigt, ich kann hinein- und herauszoomen, sehe die anderen Objekte, aber aus dem Quellcode kann ich sehen, dass das wie einzelne Bilder mit etwas Logik angezeigt wird.

Ich möchte meinen benutzerdefinierten SVG-Code mit allen Layern integrieren, damit ich mit Leaflet ziehen, zoomen und alle anderen guten Funktionen verwenden kann.

Diese Website hat genau das, was ich tun möchte: https://winter.intermaps.com/oetztal?lang=en

aus dem Quellcode Sie sehen können sie die volle SVG Code innerhalb des <div class="leaflet-pane leaflet-overlay-pane"> integrieren.

EDIT:

Ich habe meine map.html Datei in meinem Server hochgeladen und der gesamte Code SVG ist innerhalb der Datei. Wie kann ich es in Leaflet aufnehmen?

Answer 1

Wenn Sie Svg als imageOverlay laden, wird es innerhalb , die es statisch macht. Überprüfen Sie diese PR https://github.com/Leaflet/Leaflet/issues/5756 Dieser tolle Kerl herausgefunden, dass Sie einfach ersetzen können mit <object> und legen Sie Svg Inhalte dort zu behandeln, wie große Jungs Svg. Zumindest funktionieren Event-Handler in den Knotenattributen von svg.