Artikelverzeichnis
Anzeige der ECharts Map-Karte
ECharts unterstützt die Anzeige geografischer Koordinaten, und es wird ein spezielles bereitgestellt geo组件. Die Karte kann setOptiondurch Bereitstellung option.geoder Konfiguration in angezeigt werden.
option.geoIn der Konfiguration gibt es ein mapAttribut , dessen Wert der Wert ist, der echarts.registerMap("name", geojson)registriert wurde name, um ihn mit der entsprechenden GeoJSON-Datendatei zu verknüpfen; GeoJSON-Kartendaten mit unterschiedlichen Namen registrieren und dann ändern option.geo.mapund regionszur Anzeige verschiedener Karten wechseln.
Einzelheiten finden Sie im offiziellen Dokument: https://echarts.apache.org/zh/option.html#geo
Erfassung von GeoJSON-Datendateien
Alibaba Cloud DataV.GeoAtlaskann Daten online abrufen, die Daten sind jedoch relativ alt ( aktualisiert im Jahr 2021,5 ) und wurden zum 9. Dezember 2022 seit anderthalb Jahren nicht mehr aktualisiert. Angesichts der Änderungen und Anpassungen vieler Bezirke und Kreise In der Provinz Zhejiang ist es nicht erforderlich, Daten zu empfehlen DataV.GeoAtlas.
AreaCity-JsSpider-StatsGovSie können neue Geojson-Daten aus der Open-Source-Bibliothek herunterladen, darunter Zonendaten auf vier Ebenen, Koordinatengrenzendaten auf drei Ebenen von Provinzen und Städten sowie Koordinatengrenzendaten auf Gemeindeebene:
- Online-Vorschau und Download (Gitee): https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/assets/geo-echarts.html (stellt ECharts + Gaode-Karte mit vierstufigem Drilldown-Code bereit)
- Open-Source-Bibliothek (GitHub): https://github.com/xiangyuecn/AreaCity-JsSpider-StatsGov
- Normalerweise einmal im Monat (synchronisieren Sie direkt von Gaode aus, es dauert länger, wenn Sie beschäftigt sind)
Bei den heruntergeladenen Daten handelt es sich um die neueste CSV-Datei. Laden Sie gleichzeitig das von der Open-Source-Bibliothek bereitgestellte Konvertierungstool herunter. Das Tool unterstützt die Konvertierung von CSV-Daten in: SHP, GeoJson, SQL, das Importieren von Datenbanken und die Konvertierung von Koordinatensystemen und verfügt über umfangreiche Funktionen Wir müssen es nur in Geojson konvertieren.
Das konvertierte Geojson ist eine große Datei, die alle Daten der Provinzen und Städte des Landes enthält. Wir verwenden im Allgemeinen geteilte Dateien in ECharts, eine Datei für jeden Bezirk und Landkreis. Wir teilen sie in den erweiterten Funktionen des Tools auf. Diese große Datei Die Datei wird in eine kleine Datei umgewandelt. Klicken Sie auf die erweiterte Funktion des Tools und wechseln Sie zur Geojson-Aufteilungsfunktion, um die Datei nach Provinzen, Städten und Kreisen aufzuteilen. Wenn wir die Daten der Provinz Zhejiang benötigen, kopieren Sie einfach die Datei unter Zhejiang Provinz. .
Im Allgemeinen kommt es jedes Jahr zu Änderungen in den Bezirken und Landkreisen, daher müssen die Daten rechtzeitig aktualisiert werden. Es wird empfohlen, die Daten mindestens einmal im Jahr zu aktualisieren. Befolgen Sie bei der Aktualisierung die Schritte zum erneuten Herunterladen der neuesten Daten und Betreiben Sie es erneut.
Stellen Sie die Daten der Provinz Zhejiang in ECharts grafisch dar
Nachdem wir die GeoJSON-Datei der Provinz Zhejiang erhalten haben, verfügt jede Stadt und jeder Bezirk darin über eine entsprechende JSON-Datei. Wir laden die entsprechende JSON-Datei entsprechend dem Ort, der angezeigt werden muss, und registrieren dann die Karte darüber echarts.registerMap("City"+城市id, geojson).
Aktualisieren Sie dann option.geo.mapdie Summe der Echarts-Instanz regions, und die Geojson-Karte kann in Echarts angezeigt werden.
Binden Sie das Klickereignis an die Karte. Wenn Sie auf eine Stadt auf der Karte klicken, wiederholen Sie die obigen Schritte, laden Sie die nächste Ebene der JSON-Datei, registrieren Sie sich und zeigen Sie sie erneut an. Auf diese Weise kann ein Drilldown auf mehreren Ebenen erreicht werden.
Lassen Sie uns eine Geojson-Darstellung von Hangzhou, Zhejiang, erstellen, die intuitiver ist:
Zugehörige Codes finden Sie auf dieser Demoseite , die den vierstufigen Drilldown von ECharts Map und die Zeichnungsanzeige auf einer Gaode-Karte implementiert. Der Front-End-Quellcode befindet sich unten auf der Seite. Diese Demo ist jedoch zu kompliziert und die Verwendung des Kopiercodes ist nicht bequem. In ein paar Tagen werde ich einen speziellen Artikel schreiben, um das Schreiben von ECharts Map-Code vorzustellen, also bleiben Sie dran~
【über】