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

您所在的位置：网站首页 › 上海所有区县地图分布 › 使用echarts完成中国省市区县镇地图展示

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

2024-07-09 20:09| 来源: 网络整理| 查看: 265

目录前言一、中国地图 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

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'

【本文地址】

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

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

今日新闻

推荐新闻