詳解Echarts繪制街道及鎮級地圖（圖文步驟）

本篇文章給大家帶來了關于Echarts的相關使用知識，其中主要內容是教大家如何使用Echarts一步步繪制街道以及鎮級地圖的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

需求要求畫出上海普陀區，具體街道、鎮級的地圖。普通Echart只能畫出省市區的的地圖不能提供具體的街道、鎮級數據。所以可以通過bigmap來獲取具體數據。

1. 下載bigmap（選擇第二個全能版）

2. 在bigmap中下載所需街道的.kml文件

3.下載成功后需要將.kml文件轉化為json

將.kml文件導入geojson.io，如果有多個.kml文件則依次導入，導入成功后右側區域就是我們需要的json文件，左側部分則是我們后面繪制地圖對應的形狀（這個可以不用管），復制json數據將其保存在項目中（這里我是保存在public/static/map.json)

地址：geojson.io/#map=12.59/…

4.最重要的數據已經有了，接下來就可以開始使用echart進行繪制了

首先安裝echarts

npm install echarts

然后直接在vue文件中按需導入（全局導入可參考echarts文檔）

import * as echarts from 'echarts';

這里還需要用到axios來請求我們剛剛的json數據，所以安裝axios

npm i axios

導入axios

import axios from 'axios

用過echarts都知道，我們需要定義一個div容器來渲染地圖

<div id="main" style="width: 300px; height: 500px"></div>

因為我的需求是進入頁面直接渲染的所以我把js代碼直接寫在了mounted鉤子里面

到這里應該就已經完成了，但是run以后發現報錯了！

參考到了這篇文章：t.csdn.cn/2mozQ

原因：生成的地圖里有一個區域為兩塊不連續的，type為GeometryCollection，echarts中對于此類型沒有做處理 解決方案：把兩塊不連續的數組數據放到一起，類型type為Polygon。具體可參考上述文章。

最終效果：

推薦學習：《JavaScript視頻教程》