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——表单应用范例
Feb 20 Javascript
js调用flash的效果代码
Apr 26 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
jQuery事件用法详解
Oct 06 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
JavaScript 定时器详情
Nov 11 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP小教程之实现链表
2014/06/09 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
部队学习十八大感言
2014/01/11 职场文书
20岁生日感言
2014/01/13 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
在校实习生求职信
2014/06/18 职场文书
中班下学期个人总结
2015/02/12 职场文书
入党个人总结范文
2015/03/02 职场文书
生死牛玉儒观后感
2015/06/11 职场文书