Die Forderung erfordert das Zeichnen einer Karte des Bezirks Putuo in Shanghai, bestimmter Straßen und Städte. Ordinary Echart kann nur Karten von Provinzen und Städten zeichnen, aber keine spezifischen Daten auf Straßen- und Stadtebene liefern. So können Sie spezifische Daten über Bigmap abrufen.
- Laden Sie Bigmap herunter (wählen Sie die zweite allmächtige Version)
- Laden Sie die .kml-Datei der gewünschten Straße in Bigmap herunter
3. Nach erfolgreichem Download muss die .kml-Datei in json konvertiert werden
Importieren Sie die .kml-Datei in geojson.io. Wenn mehrere .kml-Dateien vorhanden sind, importieren Sie sie nacheinander. Nachdem der Import erfolgreich war, ist der rechte Bereich die benötigte json-Datei und der linke Teil die entsprechende Form Karte, die wir später zeichnen werden (dies kann ignoriert werden. ), die json-Daten kopieren und im Projekt speichern (hier speichere ich sie in public/static/map.json)
Adresse: geojson.io/#map=12.59/…
4. Die wichtigsten Daten sind bereits vorhanden, und dann können Sie mit dem Zeichnen mit Echor beginnen
Installieren Sie zuerst Echarts
npm install echarts
复制代码Importieren Sie es dann bei Bedarf direkt in die vue-Datei (für den globalen Import lesen Sie bitte die echarts-Dokumentation)
import * as echarts from 'echarts';
复制代码Hier müssen wir auch axios verwenden, um die JSON-Daten anzufordern, die wir gerade hatten, also installieren Sie axios
npm i axios
复制代码Axios importieren
import axios from 'axios
复制代码Wie wir alle nach der Verwendung von Echorts wissen, müssen wir einen Div-Container definieren, um die Karte zu rendern
<div id="main" style="width: 300px; height: 500px"></div>
复制代码Da meine Anforderung darin besteht, die Seite direkt aufzurufen und zu rendern, habe ich den js-Code direkt in den gemounteten Hook geschrieben
Es hätte hier abgeschlossen werden sollen, aber nach dem Ausführen wurde festgestellt, dass ein Fehler gemeldet wurde!
Siehe diesen Artikel: t.csdn.cn/2mozQ
Grund: Es gibt zwei diskontinuierliche Bereiche in der generierten Karte, der Typ ist GeometryCollection, und es gibt keine Lösung für diesen Typ in Echarts: Fügen Sie zwei diskontinuierliche Array-Daten zusammen, und der Typ ist Polygon. Einzelheiten entnehmen Sie bitte dem obigen Artikel.
Endeffekt: