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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
Vue动态获取width的方法
Aug 22 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
对联广告js flash激活
2006/10/19 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
js获取域名的方法
2015/01/27 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
vue-router单页面路由
2017/06/17 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
中学劳技课教师的自我评价
2014/02/05 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
化学工程专业求职信
2014/08/10 职场文书
公司开业主持词
2015/07/02 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python