溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么使用Echarts繪制街道及鎮級地圖的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用Echarts繪制街道及鎮級地圖文章都會有所收獲，下面我們一起來看看吧。
需求要求畫出上海普陀區，具體街道、鎮級的地圖。普通Echart只能畫出省市區的的地圖不能提供具體的街道、鎮級數據。所以可以通過bigmap來獲取具體數據。
下載bigmap（選擇第二個全能版）
在bigmap中下載所需街道的.kml文件
3.下載成功后需要將.kml文件轉化為json
將.kml文件導入geojson.io，如果有多個.kml文件則依次導入，導入成功后右側區域就是我們需要的json文件，左側部分則是我們后面繪制地圖對應的形狀（這個可以不用管），復制json數據將其保存在項目中（這里我是保存在public/static/map.json)
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以后發現報錯了！
最終效果：
關于“怎么使用Echarts繪制街道及鎮級地圖”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用Echarts繪制街道及鎮級地圖”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
