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之Partial Application学习
Jan 10 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript 模拟点击广告
2010/01/02 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python实现简单过滤文本段的方法
2017/05/24 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python字典底层实现原理详解
2019/12/18 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
宿舍保安职务说明书
2014/02/25 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js
Python集合set()使用的方法详解
2022/03/18 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏