前言
一、中国地图
- 1.1 地图数据-china.js
- 1.2 代码应用
二、省份地图——以山东为例，其他省份同理
- 2.1 地图数据-shandong.js
- 2.2 代码应用
三、市级地图——以山东临沂市为例
- 3.1 地图数据——linyi.json
- 3.2 应用
四、县级地图——以山东临沂市沂南县为例，无镇级边框
- 4.1 地图数据
- 4.2 应用
五、镇级地图——以山东临沂市沂南县为例镇级地图
- 5.1地图数据
- 5.2 应用
六、案例全部代码
结语

前言

很长时间没有写博客了，最近在做一个大数据面板，记录一下如何使用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>

 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()//地图自适应})}

二、省份地图——以山东为例，其他省份同理

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>

  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()})}

三、市级地图——以山东临沂市为例

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>

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],},...]}

  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()})}

四、县级地图——以山东临沂市沂南县为例，无镇级边框

4.1 地图数据

县级地图一般是最低层级地图，使用datav地图选择器，可以下载没有镇级的县级地图；
如果还需要镇级地图，推荐：
- echarts+百度地图适配（下面会讲）
- http://geojson.io/自行画框，然后导出json数据后使用；

4.2 应用

html

     <div id="yinanMap"></div><script src="js/city.js"></script>

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 },},...]}

 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()})}

五、镇级地图——以山东临沂市沂南县为例镇级地图

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>

  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)}

六、案例全部代码

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><div class="box"><h1>山东省临沂市沂南县镇级地图</h1><div id="yinanMapChart"></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><script src="js/china.js"></script><script src="js/shandong.js"></script><script src="js/city.js"></script><script src="js/bmap.js"></script><script src="js/main.js"></script>
</body></html>

$(function () {// 中国地图function chinaMap() {let myChart = echarts.init(document.getElementById('chinaMap'))option = {geo: {map: 'china',label: { show: true }, //显示省份roam: true, //缩放},series: [], //地图上二开点线特效数组}myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}//   省级地图function shandongMap() {let myChart = echarts.init(document.getElementById('shandongMap'))option = {geo: {map: 'shandong',label: { show: true }, //显示省份roam: true, //缩放},series: [], //地图上二开点线特效数组}myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}//   市级地图function linyiChart() {var linyiMapChart = echarts.init(document.getElementById('linyiMap'))echarts.registerMap('linyi', linyiMap, {})option = {series: [{type: 'map',mapType: 'linyi',label: { show: true }, //显示省份roam: true,data: [],},],}linyiMapChart.setOption(option)window.addEventListener('resize', function () {linyiMapChart.resize()})}//   县级地图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()})}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)}chinaMap()shandongMap()linyiChart()yinanChart()zhenChart()
})

结语

以上就很清楚的书写了使用echarts完成中国省市区县镇地图展示的全过程，详细代码也可下载案例代码；

如果本文对你有帮助的话，请不要忘记给我点赞评论打call哦~o(￣▽￣)ｄo
有其他问题留言 over~

使用echarts完成中国省市区县镇地图展示相关推荐

实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）
geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...
全国省市区县SQL地图包
中国省市区县sql语句效果如下: sql脚本文件30多M,压缩包1M多,下载地址:https://download.csdn.net/download/lwf3115841/20925732
中国省市区县行政编码sql脚本
中国省市区县行政编码sql脚本 1.初始化数据库截至2020年2月,中国省市区县行政编码sql脚本: 链接: https://pan.baidu.com/s/1GLQy7fpqPOsqMLuIn12 ...
最新中国省市区县geoJSON格式地图数据Echarts地图数据
最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.jso ...
中国省市区县行政编码处理（转存在到数据库）
表schema CREATE TABLE `t_china_area` (`code` varchar(10) NOT NULL COMMENT '地区编码',`name` varchar(20) N ...
svg 地图_如何一秒 GET 全国各省市区县的地图？
知乎视频www.zhihu.com 当你在制作 PPT 的时候,需要一张地图,你打开搜索引擎,找到的图片却都是这样的,显然这都不是你想要的风格,于是你开始自行描摹. 其实大可不必这么麻烦,阿里云的小 ...
echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）
前言:最近公司项目有个需求,展示河南省各省市区县的地图,并展示相应的数据,看了些资料决定用echarts实现. 一.完成之后的效果图点击市的模块显示对应的市,并显示对应市的数据点击区县的模块显示对 ...
echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
echarts河北省json文件最新的_echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件.找是找到了 ...

使用echarts完成中国省市区县镇地图展示

目录

前言

一、中国地图

1.1 地图数据-china.js

1.2 代码应用

二、省份地图——以山东为例，其他省份同理

2.1 地图数据-shandong.js

2.2 代码应用

三、市级地图——以山东临沂市为例

3.1 地图数据——linyi.json

3.2 应用

四、县级地图——以山东临沂市沂南县为例，无镇级边框

4.1 地图数据

4.2 应用

五、镇级地图——以山东临沂市沂南县为例镇级地图

5.1地图数据

5.2 应用

六、案例全部代码

结语

使用echarts完成中国省市区县镇地图展示相关推荐

最新文章

热门文章