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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
angular简介和其特点介绍
Jan 29 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
js中arguments对象的深入理解
May 14 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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留言本实例代码
2010/05/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
C语言中break与continue的区别
2012/07/12 面试题
自我评价范文
2013/12/22 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
商超业务员岗位职责
2014/03/12 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
详解Go与PHP的语法对比
2021/05/29 PHP
Java基础之this关键字的使用
2021/06/30 Java/Android