前言

       Echarts 官網可以找到一些地圖的配置和地圖示例，但沒有自己想要的區域或鄉鎮地圖，瀏覽器中也很少查詢到具體的區縣地圖。 該文可幫助解決此類問題，並獲取所有你想要的地圖資料。

Echarts如何繪製鄉鎮地圖？

步驟一：按照 echarts 官網示例，對地圖進行初始化

import * as echarts from 'echarts';
import mapGeoJson from './town.json'; //註冊地圖的資料

let option = {
	backgroundColor: 'transparent',
	series: [
	   {
               name:'鄉鎮地圖',
               type: 'map',
               map: 'townMap', //使用 registerMap 註冊的地圖名稱
               data:[],
           }
       ]
};
let myChart = echarts.init(document.getElementById('elementId'));
echarts.registerMap('townMap', mapGeoJson);
option && myChart.setOption(option);

　註釋：地圖其他的具體配置詳見 echarts 官網。

步驟二：獲取註冊地圖的資料

2.1 訪問 bigemap 官網，下載 BIGEMAP 全能版軟體，並安裝完畢。

2.2 開啟 BIGEMAP 軟體，選擇行政區域

2.3 匯出地區的kml檔案

選擇行政區域後，點選右下角的匯出圖示，如下圖

註釋：

(a) 區縣和鄉鎮的kml檔案都要匯出，如果縣級區域的資料是從其他方式獲取（如 阿里的DATAV.GeoAtlas），邊界上可能出現錯位的情況！

(b) 阿里的DATAV.GeoAtlas只能獲取到區縣級地區資料。

2.4 合併區縣和鄉鎮的kml檔案

訪問http://geojson.io

然後從左上角選單，依次匯入上一步【2.3】獲取的kml檔案，該網址左邊會自動生成匯入區域圖，右邊就會自動生成區域地圖的資料

2.5 待所有kml檔案匯入完成，匯出或直接拷貝出右側地圖資料的json檔案（此資料即為註冊地圖的資料）

步驟三：將第二步驟得到的地圖資料與第一步驟的引入資料同步即可。

參考：

　　Echart官網：https://echarts.apache.org/

　　阿里的DATAV.GeoAtlas：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=36.053745707066234&lng=113.8598042664261&zoom=3.5

      參考網址：https://blog.csdn.net/weixin_44861708/article/details/114223258

搜尋

複製