In diesem Artikel werde ich Ihnen erklären, wie wir beim Erstellen einer interaktiven Karte auf typische Fehler gestoßen sind, und vor allem werde ich Ihnen Links zu normalen, aktuellen Karten der einzelnen Einheiten der Russischen Föderation geben.
Unsere Herausforderung. Erstellen Sie eine interaktive Karte, sodass ein Ereignishandler beim Bewegen des Mauszeigers über eine Region einige Daten nach Region (z. B. deren Namen) auslöst und anzeigt.
Auf den ersten Blick scheint dies sehr einfach zu sein, aber später in diesem Artikel werde ich Ihnen erzählen, wie wir mehr als 3 Tage damit verbracht haben, das Problem zu beheben und vor allem Fehler zu identifizieren.
Also beginnen wir das Projekt. Zunächst benötigen wir die Karte selbst: Bei Google erhalten wir eine ganze Reihe verschiedener Formate von Kartendaten.
Da wir keine professionellen Geoanalytiker sind, kümmern wir uns im Prinzip nicht um Formate - die Hauptsache ist die Arbeit, daher werden wir hier nicht alles und jedes berücksichtigen, sondern zwei Hauptgruppen hervorheben.
- Vektorkarten
- Karten mit Metadaten
Vektorkarten sind ein reguläres Vektorpolygon, das die Form eines Objekts, beispielsweise eines Landes, wiederholt. Das Hauptformat für diesen Kartentyp ist SVG. Und ich werde sofort sagen, warum es schlecht für unser Projekt ist und warum es überhaupt nicht in interaktiven Karten verwendet werden sollte. Es ist einfach eine geometrische Figur ohne Daten, auch ohne Namen. Wenn Sie kein Masochist sind, schrauben Sie den Ereignishandler nicht manuell mit jedem Polygon und geben alle Informationen zum Objekt manuell ein, von Akronymen in verschiedenen Sprachen bis hin zum Verwaltungsstatus. Wenn Sie dies mit einer Karte der Bundesbezirke tun können, werden Sie auf Bezirksebene einfach sterben.
Karten mit Metadaten. Karten mit Metadaten sind in einer sehr einfachen Sprache dieselben Vektorpolygone, nur mit darin verdrahteten Informationen. Es gibt viele Formate, ich werde die wichtigsten auflisten: GeoJSON, SHP, GeoTIFF, MIF, TAB, KML. Im Allgemeinen gibt es viele von ihnen, von denen jede ihre eigenen Merkmale aufweist, über die nur eine Person, die sich mit GIS-Systemen auskennt, Bescheid geben kann.
Dieser Artikel befasst sich nur mit GeoJSON, da das Projekt beschlossen hat, nur dieses Format mit Metadaten zu verwenden. Alle Karten unten enthalten den Namen der Region, ihre Beschreibung, Bevölkerung usw.
Wir haben das Format herausgefunden und suchen nach Daten mit einer bestimmten Erweiterung. Und dann beginnt der Spaß. Denken Sie, dass es einfach ist, funktionierende Karten der Russischen Föderation zu finden? Pff, es war nicht da, es erwartet dich viel Abenteuer. Also haben Sie die Karte heruntergeladen, alles konfiguriert, gestartet und ...
Krim Die ersten Links in Google gehen zu gis-lab. Und auf diesen Karten gibt es keine Halbinsel. Hier ist alles einfach. Die wichtigsten russischen Karten wurden in den Jahren 2000 und 2010 hergestellt, dh bevor die Krim in die Russische Föderation aufgenommen wurde, und viele westliche Dienste erkennen den Beitritt nicht an und fügen die Halbinsel nicht zu ihren Karten hinzu. Und wenn Sie in Russland eine Karte ohne Krim in Ihr Projekt einfügen, verstehen Sie selbst, was passieren kann. Daher ist das Erstellen einer Karte ohne dieses Gebiet keine Option.
Lösung: Suchen Sie nach Amateurkartenbaugruppen nach 2014 oder nach ausländischen Diensten, die den russischen Karten noch die Krim hinzufügen. Aber höchstwahrscheinlich werden Sie sie nicht finden.
Lass uns weiter schauen. Wir gehen zu Google, fahren in "Geojson-Themen der Russischen Föderation herunterladen", finden, laden die Karte von mydata.biz herunter und ... Alles ist bei uns geschwollen.
Schwimmende Grenzen. In einigen Karten sind territoriale Gewässer in den Themen enthalten. Aufgrund der Tatsache, dass das Territorium aller an das Meer angrenzenden Subjekte um 24 km vergrößert wird, sieht die Karte „schwebend“ aus, insbesondere die Regionen mit Küste und Inseln. Wenn Sie unprätentiös sind, können Sie diese Karte wahrscheinlich verwenden, aber für mein Projekt ist dies kategorisch inakzeptabel.
Lösung. Suchen Sie weiter nach Karten ohne Hoheitsgewässer.
Mach weiter. In den Tiefen des Internets haben Sie auf einer verlassenen Website Karten gefunden, wie auf der Krim, und nicht "schwebten", heruntergeladen und ...
Die Grenzen der Subjekte laufen ineinander.
Dieses Problem tritt häufig bei Amateurkarten auf, die Grenzen der Motive laufen ineinander und aus diesem Grund ist eine falsche Anzeige von Elementen möglich. Dies kann auch auf eine nicht ordnungsgemäße Komprimierung oder Vereinfachung von Karten zurückzuführen sein.
Rote Punkte sind der Schnittpunkt von Polygonen aneinander.
Dies führt nicht immer zu Artefakten in der Anzeige, aber bei einer großen Anzahl von Fehlern kann das folgende Bild auftreten:
Lösung: Suchen Sie nach Karten, ohne sich gegenseitig mit Polygonen zu treffen.
Wir suchen weiter. Irgendwo, durch ein Wunder, finden Sie eine gute Karte - mit der Krim, ohne Hoheitsgewässer, ohne aufeinander zu landen und ...
Alles friert ein. Die Karte wiegt aufgrund übermäßiger Details 35 MB und schwache Computer werden langsamer, wenn sie angezeigt werden.
Lösung: Suchen Sie nach einer Karte mit weniger Details oder komprimieren Sie die Karte. Für Geojson empfehle ich mapshaper.org.
Das ist alles, du bist durch neun Höllenkreise gegangen, hast die perfekte Karte gefunden, beide heruntergeladen und ... Ein Teil von Tschukotka war idealerweise vom Rest Russlands abgeschnitten.
Tschukotka Tschukotka Tschukotka Dieses Wort ist es wert, viele Male wiederholt zu werden, denn wenn Sie ein Anfänger sind, werden Sie lange Zeit mit diesem Problem konfrontiert sein. Es wird für Sie nicht leicht zu verstehen sein, dass dies keine kaputte Karte ist, dass dies kein Fehler ist und dass es nicht so einfach zu beheben ist, wie Sie auf den ersten Blick denken. Sie werden nicht in der Lage sein, dieses Stück abzuschneiden und sich an den Rest Russlands zu halten. Sie werden nicht in der Lage sein, alle Objekte ohne Fehler usw. in die Mitte zu übertragen. Und wenn es gelingt, werden es die schlimmsten Krücken sein, und wir sind mit solchen Methoden nicht einverstanden.
Geschnittene Chukotka
Ich werde nicht auf Details eingehen, sondern die Karten sofort aufdecken.
Dies ist kein Fehler. Die Sache ist, dass es in Kartendiensten standardmäßig eine Projektion gibt (ja, Sie müssen verstehen, was eine Projektion ist und was sie sind) CRS84, bei der der Koordinatenursprung grob gesagt vom 180-Meridian stammt, d. H. Die Karte beginnt und endet Tschukotka. Stellen Sie sich vor, Sie schneiden und erweitern den Globus entlang dieser Linie.
Aus Sicht der CRS84-Projektion wird alles korrekt angezeigt.
Projektion ist ein großes und komplexes Thema. Ich denke nicht, dass es notwendig ist, viel Zeit damit zu verbringen, es zu studieren, wenn Sie nur eine interaktive Karte in Ihrem Projekt erstellen müssen. Außerdem werde ich nicht im Detail kauen, sondern nur über die Projektionen sprechen, die dazu beitragen, die Karte der Russischen Föderation korrekt anzuzeigen.
Die Projektion Asia Lambert Conformal Conic wird Chukotka an seinen Platz zurückbringen. Soweit ich weiß, handelt es sich hierbei jedoch um eine nicht standardmäßige Projektion, und viele Dienste, z. B. http://geojson.io , unterstützen keine Abweichung vom Standard.
Mit der Conic-Flächengleichprojektion hat nach einer kleinen Überarbeitung alles für uns funktioniert.
Nachdem Sie eine konische Projektion platziert haben, sehen Sie das folgende Bild: Russland fiel auf die Seite und ertrank halb.
Dies ist wieder kein Fehler - die Karte wurde korrekt angezeigt, aber standardmäßig gibt es einen solchen Winkel. Dies wird durch einfaches Umdrehen und Zoomen der Karte gelöst:
<ComposableMap projection={() => geoConicEqualArea() .scale(690) .center([100, 100]) .parallels([40, 80]) .rotate([265].translate([130, 5]) }> <ZoomableGroup> <Geographies geography={map}> {(geographies, proj) => geographies.map(geo => ( <Geography projection={proj} geography={geo} /> )) } </Geographies> </ZoomableGroup> </ComposableMap>
Als Ergebnis erhalten Sie die folgende Karte:
... mit dem alles gut ist, ist sie ohne Vorräte und schön. Fast. Trotzdem blieb eine „Chukchi-Narbe“ zurück, die wir nicht entfernen konnten. Es ist nicht besonders auffällig und schadet der Zusammensetzung nicht sehr. Wir haben keinen Weg gefunden, es zu entfernen, und um ehrlich zu sein, haben wir nicht danach gesucht - wir waren zu sehr von früheren Fehlern gequält und haben beschlossen, alles so zu lassen, wie es ist.
Daher haben wir typische Fehler beim Entwerfen einer interaktiven Karte behoben. Wenn wir vor einem Monat einen solchen Artikel hätten, würde dies unserem Team viele Nerven ersparen und hoffentlich auch Ihren.
Wir haben folgende Probleme untersucht:
- Fehlende Krim
- Zu den Themen gehörten Hoheitsgewässer
- Die Grenzen der Subjekte laufen ineinander
- Karte ist zu schwer
- Chukotka schneidet 180 Meridian
Hinweis des Entwicklers aus dem Team
Eine weitere Schwierigkeit bestand darin, eine Komponente zum Rendern von Karten zu finden, die nicht von der Clientseite abhängen würde Die Karte wird auf dem Server gerendert. Wir verwenden das Next.js-Framework, das auf React basiert. Daher hat d3-geo einfach nicht funktioniert. Es war erforderlich, die React-Komponente zu finden.
PS: Der Artikel wurde nur so geschrieben, dass wir jung und grün sind, da wir nicht 2-3 Tage damit verbringen, mit Karten zu quälen und aus den Fehlern anderer zu lernen. Es wurde nicht von einem Programmierer, nicht von einem Geoanalytiker, nicht von einem Kartographen geschrieben, sondern von einem einfachen Projekt. Für alle Behauptungen und Ungenauigkeiten empfehle ich daher, Ihren Artikel im russischsprachigen Segment zu schreiben, wo Sie ausführlich erklären, wie es geht, da ich keine normalen Informationsquellen gefunden habe.
Karten:
Ab Juni 2019 die besten russischen Karten
Eine große Kartenbank aus der ganzen Welt von mittlerer Qualität
Dienstleistungen:
Online-Kartenanzeige und ein Tool zum Komprimieren
Projektion
Projektion
Reagieren Sie auf die Map-Rendering-Komponente