完整绘制echarts地图并实现两级联动（区-乡镇）

本篇文章会记录如何完成地图两级联动，以及过程中遇到的一些问题，希望能帮到大家！

1、环境

 <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="echarts.min.js"></script>

注意：echarts.min.js是本地文件，你可以去echarts官网下载，也可以直接去我后面发布的实例里找。

2、分类

利用文件命名的方式确定好要绘制地区的层级关系，并且绘制重庆市地图，你就先获得重庆市下各个区的边界坐标然后拼接成重庆地图，准备绘制区地图就要获得乡镇级别的边界坐标然后拼接成整体。具体情况如下：

重庆市要装的是各个区县的坐标数据，长寿区，忠县等文件夹装的是各自的乡镇级别的坐标数据。

3、获取边界坐标

下载”bigemap”或其他地图软件,然后根据第一步下载需要的地区边界坐标到分好类的文件夹里，文件后缀为”.kml”。本次用的是“bigemap”：

4、检查kml文件

有了坐标我们还不能直接拼接地图，因为有的区域划分会有很多小块闭合的区域，echarts无法绘制出由kml文件内部衔接起的多个闭合的区域坐标，不然在绘制地图的时候会报错：

Invalid geoJson format Cannot read property ‘length’ of undefined。

所以在拼接地图生成对应的json文件之前需要确保一个kml文件里只有一个<Polygon></Polygon>标签，我们直接把kml文件在文本编辑器打开，利用ctrl+f查询的方式整理后，来看有多少个<Polygon>标签，有多个时就新建kml文件把原文件拆分开来。下面是拆分前后的样子：

拆分前

拆分后

注意：拆分的时候一定要确保几个kml文件只有<Polygon>标签内的内容不一样。

5、拼接地图生成对应的json文件

进相关网站，引入kml文件就可以拼接地图了，当你一个文件夹内的区域拼接完了之后，复制右侧的全部代码，粘贴到一个新建的json文件里然后新建“方法名（）”的括号里（这是为了解决本地引用时候的跨域问题），方法名跟文件名一致（方便后面调用）。

拼接

生成json文件

6、引入json数据

第一层地图的数据因为只有一个文件，我选择的是直接通过引入js的方式引进来，不存在跨域问题，但是要在json文件里声名变量名，方便调用数据。

点击事件引入二级地图数据用ajax然后通过jsonp的形式读取json数据（解决本地引入的跨域问题）。

 $.ajax({type: "get",url:'/ZHZM/javaScript/wis/yxtj/mapdata/'+provinces[params.name]+'.json',dataType: 'jsonp',crossDomain: true,jsonp: "callback",jsonpCallback:provinces[params.name],success: function(data){map2Data= [];for (var i = 0; i < data.features.length; i++) {map2Data.push({name: data.features[i].properties.name})}echarts.registerMap(params.name, data);renderMap(params.name, map2Data);},});

parames.name 是点击事件传进来所点击的区域名称，provinces[]是为了区域名称与对应的文件名称形成映射关系，provinces[ parames.name]表示文件名。

此处解决跨域的注意点：

①jsonp

②crossDomain: true,

③生成json文件时，复制的坐标代码放在“方法名（）”的括号内，见第五步。

7、完整的js代码

var chart = echarts.init(document.getElementById('chongqing-map'));var provinces = {'大渡口区':'dadukou','巴南区':'banan','北碚区':'beibei','璧山区':'bishan','城口县':'chengkou','大足区':'dazu','垫江县':'dianjiang','丰都县':'fengdu','奉节县':'fengjie','万州区':'wanzhou','涪陵区':'fuling','合川区':'hechuan','江北区':'jiangbei','江津区':'jiangjin','九龙坡区':'jiulongpo','开州区':'kaizhou','梁平区':'liangping','南岸区':'nanan','南川区':'nanchuan','彭水苗族土家族自治县':'pengshui','綦江区':'qijiang','黔江区':'qianjiang','荣昌区':'rongchang','沙坪坝区':'shapingba','石柱土家族自治县':'shizhu','铜梁区':'tongliang','潼南区':'tongnan','巫山县':'wushan','巫溪县':'wuxi','武隆区':'wulong','秀山土家族苗族自治县':'xiushan','永川区':'yongchuan','酉阳土家族苗族自治县':'youyang','渝北区':'yubei','渝中区':'yuzhong','云阳县':'yunyang','长寿区':'changshou','忠县':'zhongxian'};//加载重庆初始地图$(document).ready(function(){mapData = [];//把json里的name提取出来装入mapDatafor (var i = 0; i < cq.features.length; i++) {mapData.push({name: cq.features[i].properties.name})};//注册地图echarts.registerMap('重庆', cq);//绘制地图（自己的方法）renderMap('重庆', mapData);console.log(cq); })//声名全局变量绘制全国地图配置
var option = {title: {left: 'center',textStyle: {color: '#fff',fontSize: 16,fontWeight: 'normal',fontFamily: "Microsoft YaHei"},subtextStyle: {color: '#ccc',fontSize: 13,fontWeight: 'normal',fontFamily: "Microsoft YaHei"},},tooltip: {trigger: 'item',formatter: '{b}'},animation:true,animationDuration: 1000,animationEasing: 'cubicOut',animationDurationUpdate: 1000,};//声名绘制地图的函数
function renderMap(map, data) {//option.title.subtext = map;option.series = [{name: map,type: 'map',mapType: map,zoom: 1,hoverAnimation:false,nameMap: {'china': '中国'},label: {emphasis: {show: false}},roam: true,   //设置是否开启拖动与缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2.5},itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(175,238,238, 0)' // 0% 处的颜色}, {offset: 1,color: 'rgba(   47,79,79, .1)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {areaColor: '#389BB7',borderWidth: 0}},data: data}];//渲染地图chart.setOption(option);//关闭单击事件chart.off("click");//关闭双击事件chart.off("dblclick");//如果在第一层只有单击事件if(map=="重庆"){chart.on('click',function(params){chart.clear();console.log(params.name);console.log(provinces[params.name]);$.ajax({type: "get",url:'mapdata/'+provinces[params.name]+'.json',dataType: 'jsonp',crossDomain: true,jsonp: "callback",jsonpCallback:provinces[params.name],success: function(data){console.log(data);map2Data= [];for (var i = 0; i < data.features.length; i++) {map2Data.push({name: data.features[i].properties.name})}echarts.registerMap(params.name, data);renderMap(params.name, map2Data);},});});//在第二层双击回第一层}else{chart.on('dblclick', function (params) {chart.clear();  renderMap('重庆', mapData);
});}
}

后面我会把以重庆为实例的完整地图资源发出来（包含区-乡镇的json数据），如有需要的小伙伴可以自行下载。

完整绘制echarts地图并实现两级联动（区-乡镇）相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
Android之两级联动点餐列表
文章目录前言一.效果图二.实现步骤 1.相关layout 2.相关adapter 3.自定义view 4.activity实现总结前言此功能为两个listview相互联动,左边listvi ...
python爬取丁香园的疫情数据绘制Echarts地图
2020.2.4更新完整的项目工程地址https://github.com/Arithmeticjia/wuhan 2020.1.26更新几乎每天页面都在变,放一下最新的爬虫代码,由于页面需要滚动 ...
怎么给el-select两级联动赋值_医保改革：支付范围、支付标准、支付方式的联动，大有可为...
文 | 码万祺投稿邮箱:yiyao@yidu.sinanet.com◆ ◆ ◆提到医保支付改革,一般首先想到医保支付方式改革,比如火热进行的住院DRGs.DIP及门诊按人头付费.按绩效付费等.笔者 ...
安卓ListView选中后保持高亮状态，且两级联动带图标(升级版)
在项目开发过程中,遇到了使用listView需要让选中项保持高亮状态(即选中状态保持不变),且数据是二级联动.由于item点击过后瞬间颜色就会恢复原状,视觉上感觉没有选中,此demo中通过改变选中后i ...
DropDownList and ListBox 两级联动菜单
有时候我们需要用到DropDownList 和Listbox作为连接菜单,第一个改变触发第二个数据绑定然后获取选取值(这步很重要,往往很多能得到数据,但是却不被选中) 首先来看DropDownLis ...
全国车牌号所属地JSON（省及城市两级联动）
[{"label": "北京","value": "京" }, {"label": "天津 ...
layui实现动态获取两级联动数据
效果图功能描述:页面加载时动态获取一级类别数据,根据一级类别选中的数据项动态获取二级类别的数据,并回显. html模板 <div class="layui-inline"& ...
echarts绘制完整的中国地图
echarts完整的中国地图效果图 html部分 js部分效果图 html部分给一个盒子必须给宽高<template><div class="home" ...

完整绘制echarts地图并实现两级联动（区-乡镇）

完整绘制echarts地图并实现两级联动（区-乡镇）相关推荐

最新文章

热门文章