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>