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