echarts完成中國省市區縣鎮地圖展示
https://github.com/lijie-1024/echarts
https://github.com/lijie-1024/echarts
https://github.com/lijie-1024/echarts
https://gitee.com/jcat/ecahrts-map
https://gitee.com/jcat/ecahrts-map
http://www.zui99999999999999999999999999999999999daima.com/share/4037674720152576.htm
http://www.zui9999999999999999999999999999999999999999999999999999daima.com/share/5060112043002880.htm 全新數據駕駛艙完整網頁模板，與眾不同！
10套非常完美的大數據可視化模板
HTML5城市突發預警平台實時監控模板
10套非常完美的大數據可視化模板
jquery+bootstrap+echarts數據可視化大屏展示特效實例
大屏數據可視化html代碼合集
大屏數據展示靜態的HTML頁面-主要是下載好后免費分享
python抓取數據並生成2020年新冠疫情省市數據可視化地圖
目錄
前言
很長時間沒有寫博客了，最近在做一個大數據面板，記錄一下如何使用echarts完成地圖特效展示，此篇詳細介紹書寫過程；
首先說明：
- echarts提供了解析地圖的方法，但是沒有地圖json數據，尤其是區縣地圖；
- 此篇主要解析如何獲得地圖數據及代碼應用，樣式並不在意；
- 如果對樣式或功能有要求的可以參考案例： Echarts 實現可視化數據大屏展示頁面
- 考慮到github關於數據國內下載緩慢，特附上碼雲上的中國各省份地圖下載接口，git地址：https://gitee.com/jcat/ecahrts-map.git；
- 坐標拾取器：百度地圖坐標拾取器
- 案例瀏覽：http://jcat.gitee.io/ecahrts-map/cityMap/index.html
一、中國地圖
1.1 地圖數據-china.js
獲取全國數據，
- 可以在echatrs官方github下載china.js，
- 也可以直接下載我的文件中國各省份地圖下載接口；
- 也可以使用命令行，npm install echarts -s 里面的node包中直接使用；
1.2 代碼應用
html
<div id="chinaMap"></div> <script src="js/china.js"></script> - 1
- 2
js
function chinaMap() { let myChart = echarts.init(document.getElementById('chinaMap')) option = { geo: { map: 'china',//這里的名稱需要和china.js: echarts.registerMap('china',{})中的名稱一致 label: { show: true }, //顯示省份 roam: true, //縮放 }, series: [], //地圖上二開點線特效數組，按需添加 } myChart.setOption(option) window.addEventListener('resize', function () { myChart.resize()//地圖自適應 }) } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
二、省份地圖——以山東為例，其他省份同理
2.1 地圖數據-shandong.js
獲取省份數據
- 可以在echatrs官方github下載shandong.js，
- 也可以直接下載我的文件中國各省份地圖下載接口；
- 也可以使用命令行，npm install echarts -s 里面的node包中直接使用shandong.js；
2.2 代碼應用
html
<div id="shandongMap"></div> <script src="js/shandong.js"></script> - 1
- 2
js
function shandongMap() { let myChart = echarts.init(document.getElementById('shandongMap')) option = { geo: { map: 'shandong', //這里的名稱需要和shandong.js: echarts.registerMap('shandong',{})中的名稱一致 label: { show: true }, //顯示地點 roam: true, //縮放 }, series: [], } myChart.setOption(option) window.addEventListener('resize', function () { myChart.resize() }) } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
三、市級地圖——以山東臨沂市為例
3.1 地圖數據——linyi.json
獲取市縣級地圖時和國省不同，沒有官方的提供坐標，需要自行下載，這里推薦：
- datav地圖選擇器：http://datav.aliyun.com/tools/atlas
拿到json數據后就可以使用
3.2 應用
html
<div id="linyiMap"></div> <script src="js/city.js"></script> - 1
- 2
city.js，將下載的json數據命名，方便js調用
tips：
這里下載下來的json文件也可以使用getJson()的方式請求本地json文件，但必須部署到服務端，才可以請求，不然谷歌瀏覽器就會報跨域。為了方便本地調用，使用的是命名成變量后調用。
var linyiMap = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { adcode: 371302, name: '蘭山', center: [118.327667, 35.061631], centroid: [118.284576, 35.199955], childrenNum: 0, level: 'district', parent: { adcode: 371300 }, subFeatureIndex: 0, acroutes: [100000, 370000, 371300], }, ...] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
js
function linyiChart() { var linyiMapChart = echarts.init(document.getElementById('linyiMap')) echarts.registerMap('linyi', linyiMap, {}) //echarts提供的方法echarts.registerMap(名稱，地圖數據，其他配置) option = { series: [ { type: 'map', mapType: 'linyi',//名稱需要echarts.registerMap('linyi',linyiMap,{})中的名稱一致 label: { show: true }, //顯示文字 roam: true, data: [], }, ], } linyiMapChart.setOption(option) window.addEventListener('resize', function () { linyiMapChart.resize() }) } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
四、縣級地圖——以山東臨沂市沂南縣為例，無鎮級邊框
4.1 地圖數據
- 縣級地圖一般是最低層級地圖，使用datav地圖選擇器，可以下載沒有鎮級的縣級地圖；
- 如果還需要鎮級地圖，推薦：
- echarts+百度地圖適配 （下面會講）
- http://geojson.io/自行畫框，然后導出json數據后使用；
4.2 應用
html
<div id="yinanMap"></div> <script src="js/city.js"></script> - 1
- 2
city.js 應用json數據
var yinanMap = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { adcode: 371321, name: '沂南縣', center: [118.455395, 35.547002], centroid: [118.407078, 35.538035], childrenNum: 0, level: 'district', acroutes: [100000, 370000, 371300], parent: { adcode: 371300 }, },...] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
js
function yinanChart() { let yinanChart = echarts.init(document.getElementById('yinanMap')) echarts.registerMap('yinan', yinanMap, {}) option = { series: [ { type: 'map', mapType: 'yinan', label: { show: true }, //顯示省份 roam: true, data: [], }, ], } yinanChart.setOption(option) window.addEventListener('resize', function () { yinanChart.resize() }) } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
五、鎮級地圖——以山東臨沂市沂南縣為例鎮級地圖
5.1地圖數據
- 這里使用的是百度地圖提供的API，附官網鏈接：百度地圖api ；
- 沒有百度ak也可以使用我的文件中的bmap文件夾下的css/js來書寫；
5.2 應用
html
<link rel="stylesheet" type="text/css" href="css/bmap.css" /> <div class="box"> <h1>山東省臨沂市沂南縣鎮級地圖</h1> <div id="yinanMapChart"></div> </div> <script src="js/bmap.js"></script> - 1
- 2
- 3
- 4
- 5
- 6
js
function zhenChart() { var map = new BMapGL.Map('yinanMapChart', { enableDblclickZoom: false, displayOptions: { building: false, }, }) map.centerAndZoom(new BMapGL.Point(118.455395, 35.547002), 14)//中心坐標，放大級別 map.setMapStyleV2({ styleId: '490ae0113912a55610bd2e63a719fb57',//地圖風格 }) map.enableScrollWheelZoom(true) } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
六、案例全部代碼
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>城市</title> <link rel="stylesheet" type="text/css" href="css/bmap.css" /> <style> .box { display: inline-block; border: 1px solid #000; padding: 20px; margin: 10px; width: 48%; box-sizing: border-box; } .box>div { width: 100%; height: 300px; } </style> </head> <body> <div class="box"> <h1>中國地圖</h1> <div id="chinaMap"></div> </div> <div class="box"> <h1>山東省地圖</h1> <div id="shandongMap"></div> </div> <div class="box"> <h1>山東省臨沂市11</h1> <div id="linyiMap"></div> </div> <div class="box"> <h1>山東省臨沂市沂南縣地圖</h1> <div id="yinanMap"></div> </div