ECharts地图绘制和钻取简易接口详解


Posted in Javascript onJuly 12, 2019

1.地图绘制过程原理

给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础。也就是说,你可以绘制任意形状的地图版块。

2.地图数据生成

中国以及省市县等地图的基础数据可以从这里生成与下载。

http://datav.aliyun.com/tools/atlas

有了地图范围数据,在 echarts 中通过 registerMap 给这块注册个名字,即可为后续绘制使用,以下代码以最简形式绘制一幅中国地图。

$.getJSON('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (data) {
 var name = "中国地图";
 // 注册一个地图名称
 echarts.registerMap(name, data); 
 
 var myChart = echarts.init(document.getElementById('map')); 
 var mapOption = { 
  series: [ 
  { 
   type: 'map', // 指明地图类型
   map: name,  // 指明取的名称
   label: {show:true},
   roam: true  // 可缩放
  } ]
 }; 
 myChart.setOption(mapOption, true); 
});

ECharts地图绘制和钻取简易接口详解

3.封装形成简易接口

3.1接口定义

从使用方式与期望结果出发来定义接口。期望给定区域名称,指定绘制位置(DOM元素)即可完成工作。同时希望能控制是否支持钻取,这就形成了最基础的接口定义。

/** 根据名称加载地图
 * @param elementId : DOM 元素ID
 * @param name  : 地图名称(仅已定义的地区名称)
 * @param drill  : 是否支持钻取
 */
ChinaMap.loadMap = function(elementId, name, drill) {...}

3.2接口实现

(1)支持多地图图表绘制,定义 ChartList 来记录每个DOM元素对应的图表对象。

(2)支持钻取,建立省市名称的层级关系,市编码前两位为省编码。

ChinaMap.provinceCodes={'13':'河北','14':'山西',...}
ChinaMap.cityCodes={"石家庄市":"130100","唐山市":"130200",...}

(3)动态加载相应名称的数据绘制地图,形如第2节中的示例。

(4)扩展方法:取地图层级路径。如得到“中国-湖南-长沙市”的路径,且相应的名称可点击跳转。

详细实现代码请访问:https://github.com/triplestudio/helloworld/tree/master/china_map

4.达成应用效果

4.1可钻取的中国地图

使用以下代码即可在指定的元素中绘制一幅可钻取的中国地图。

ChinaMap.loadMap('map', 'china', true);

方法 ChinaMap.loadMap 后会返回 echarts 图表对象,可以进一步进行操作。这里,使用以下代码在钻取时得到层级路径,以便达到可向上跳转的效果。

ChinaMap.loadMap('map', 'china', true).on('click', function(param){ 
 $("#path").html(ChinaMap.formatPath('map', param.name));
});

ECharts地图绘制和钻取简易接口详解

4.2各省地图

由于只需要指定名称和显示元素ID,那么遍历各省名称即可快速完成各省地图的绘制。

for(var prov in ChinaMap.provinces){
  $("#main").append("<div id='" + ChinaMap.provinces[prov] + "' class='box'></div>");
  ChinaMap.loadMap(ChinaMap.provinces[prov], prov);
}

ECharts地图绘制和钻取简易接口详解

相关代码与数据可在此下载:https://github.com/triplestudio/helloworld/releases

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
简单了解JS打开url的方法
Feb 21 Javascript
微信小程序选择图片控件
Jan 19 Javascript
vue cli安装使用less的教程详解
Jul 12 #Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 #Javascript
django js 实现表格动态标序号的实例代码
Jul 12 #Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 #Javascript
微信小程序开发常见问题及解决方案
Jul 11 #Javascript
使用vue for时为什么要key【推荐】
Jul 11 #Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 #Javascript
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python中的django是做什么的
2020/07/31 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
小学生我的梦想演讲稿
2014/08/21 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
付款承诺函范文
2015/01/21 职场文书
我的长征观后感
2015/06/09 职场文书
听课评课活动心得体会
2016/01/15 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS