2017-02-22 1 views
-1

Hier ist, was ich zu tun versucht:svg Wold Karte mit Stadt

Zeigen Sie eine Weltkarte und wenn ein Benutzer klickt auf Land, eine detaillierte Ansicht des Landes öffnet sich mit allen Staaten/Provinzen auf. Wenn sie auf Staat/Provinz klicken, möchte ich ihnen die Städte zeigen. Ich möchte in der Lage sein zu erfassen, welches Land/Staat | provice/Stadt sie klickten.

Habe ich recht, wenn ich davon ausgehe, dass SVG der richtige Weg ist? Auch irgendwelche Vorschläge/Hinweise zum weiteren Vorgehen.

Dank

Antwort

1

Ich arbeitete an ähnlichen Usecase mit SVG.

Uns Karte mit Staaten, auf Klick auf Zustand Ich zeigte Landeskarte.

Pros: 1. Ich habe nicht die Zustandskarten entfernt, sobald es gezeichnet wurde. Es ist also ziemlich schnell. 2. Alle Elemente sind in DOM, ich konnte ändern oder anhängen. (Ex: Klasse, Elemente)

Nachteile: 1. Weitere DOM-Elemente. (Leistungsproblem)

Wenn Sie weniger DOM-Manipulationen haben und jedes Mal, wenn neue Daten angezeigt werden können, gehen Sie mit Canvas. Identifizieren Sie jedoch eine Lib, die mehr APIs zur Verfügung stellt, um DOM zu manipulieren (Beispiel: Leaflet, Openlayer)

+0

Capture, welcher Zustand angeklickt wurde, ist ziemlich direkt (weder Svg noch Canvas). –

+0

Es tut mir leid, dass ich Svg/Canvas zum ersten Mal benutze. Also bitte bitte mit mir. Laden Sie einfach eine Beispiel-US-Svg-Datei aus dem Wiki herunter und fügen Sie sie einem Objekt in der HTML-Seite hinzu? Um die Fähigkeit zum Klicken und Zoomen zu implementieren, muss ich etwas Bestimmtes tun? Thx – tkansara

+0

Anstatt eine SVG-Karte herunterzuladen, laden Sie Geo-JSON-Dateien herunter (die Lat- und Lang-Koordinaten enthalten). Verwenden Sie einige Diagrammbibliotheken/Kartenbibliotheken, um die Karte zu zeichnen (Beispiel: D3.js). Ex: https://bl.ocks.org/mbostock/4060606 –