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

2023-07-21 07:38| 来源: 网络整理| 查看: 265

目录前言一、中国地图1.1 地图数据-china.js1.2 代码应用二、省份地图——以山东为例，其他省份同理2.1 地图数据-shandong.js2.2 代码应用三、市级地图——以山东临沂市为例3.1 地图数据——linyi.json3.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

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

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

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

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

山东省临沂市沂南县镇级地图

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

城市 .box { display: inline-block; border: 1px solid #000; padding: 20px; margin: 10px; width: 48%; box-sizing: border-box; } .box>div { width: 100%; height: 300px; } 中国地图山东省地图山东省临沂市11 山东省临沂市沂南县地图山东省临沂市沂南县镇级地图

$(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~

【本文地址】

公司简介

联系我们