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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
DOM 事件流详解
Jan 20 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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实现短域名互转
2013/07/05 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python列表如何更新值
2020/05/27 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
struct与class的区别
2014/02/03 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
环保公益广告语
2014/03/13 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
会议欢迎词
2015/01/23 职场文书
保送生自荐信
2015/03/06 职场文书
2015双创工作总结
2015/07/24 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python