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学习笔记二 实现可编辑的表格
Apr 09 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
react-router实现按需加载
May 09 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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加密解密的代码
2006/10/09 PHP
一个程序下载的管理程序(二)
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python中format()格式输出全解
2019/04/12 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
财务出纳岗位职责
2014/02/03 职场文书
新党员入党决心书
2015/09/22 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android