ECharts地图绘制和钻取简易接口详解

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);
}); 

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));
});

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);
}

相关代码与数据可在此下载:https://github.com/triplestudio/helloworld/releases

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • echarts3 使用总结(绘制各种图表,地图)

    由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • echarts学习笔记之箱线图的分析与绘制详解

    一.箱线图 Box-plot 箱线图(Boxplot)也称箱须图(Box-whisker Plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布范围,可以粗略地看出数据是否具有对称性.通过将多组数据的箱线图画在同一坐标上,则可以清晰地显示各组数据的分布差异,为发现问题.改进流程提供线索. 什么是四分位数 箱线图需要用到统计学的四分位数(Quartile)的概念,所谓四分位数,就是把组中所有数据由小到大排列并分成四等份,处于三个分割点位置的数

  • ECharts地图绘制和钻取简易接口详解

    1.地图绘制过程原理 给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成 中国以及省市县等地图的基础数据可以从这里生成与下载. http://datav.aliyun.com/tools/atlas 有了地图范围数据,在 echarts 中通过 registerMap 给这块注册个名字,即可为后续绘制使用,以下代码以最简形式绘制一幅中国地图. $.getJSON('https://geo.datav.aliyun.com/are

  • vue接入高德地图绘制扇形效果的案例详解

    目录 vue接入高德地图绘制扇形 需求 预想效果 代码实现 绘制基站第一步 绘制基站第二步 - 计算扇形形状 计算扇形坐标 扇区点击事件 原点点击事件 vue接入高德地图绘制扇形 为什么又写这一篇呢,主要是因为这个功能高德不支持,只能自己实现,但是呢,我估计很多人会用到这玩意儿.所以说呢,就简单的实现一下,如果有需要的话直接超过去就行,之前写过天地图绘制扇形区域的,如果使用天地图的话可以翻一下我之前的博客,百度地图和这个方法类似,可能就是使用的类不同,这样的话只要原理流程理解的差不多,直接把各个

  • vue 地图可视化 maptalks 篇实例代码详解

    Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一

  • Vue echarts实例项目商家销量统计图实现详解

    目录 组件结构设计 发送请求获取对应的数据并进行相应操作 当窗口尺寸发生变化时的操作 总体效果如图 组件结构设计 SellerPage.vue <!--针对于/sellerpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle

  • spring的几个重要类和接口(详解)

    1. datasource接口是javax.sql包下的接口,不是spring,是javax.sql下的 datasource接口有个重要的方法getConnection()方法 Connection getConnection(String username, String password) throws SQLException; 那些spring支持的数据库连接池,都是实现了Datasource接口 比如下面是阿里的DruidDatasource数据库连接池源码,它就是实现了dataso

  • 类似Object监视器方法的Condition接口(详解)

    在<基于线程.并发的基本概念(详解)>中,我们利用synchronized关键字.Queue队列.以及Object监视器方法实现了生产者消费者,介绍了有关线程的一些基本概念.Object类提供的wait的方法和notifyAll方法,与之对应的是Condition接口提供是await和signalAll.await(或wait)是让当前线程进入等待状态并释放锁,signalAll(或notifyAll)则是唤醒等待中的线程,使得等待中的线程有竞争锁的资格,注意只是资格,并不代表被唤醒的线程就一

  • 基于多态之虚方法、抽象类、接口详解

    虚方法: 1.在父类方法的返回值前加 virtual 关键字,标记为虚方法,表示这个方法可以被子类重写. 2.虚方法必须有方法体,方法体中可以没有任何内容. 3.子类可以根据需求选择性的是否重写虚方法.如果需要重写,在子类方法的返回值前加 override 关键字. 4.子类在重写虚方法时,可以根据需求选择性的是否使用 base 关键字调用父类中的该方法. 虚方法语法格式如下: public class Father { public virtual void Do() { //..... }

  • 微信小程序和百度的语音识别接口详解

    介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 windows 10 vs code 1.20.1 微信小程序开发工具 1.02.1802270 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序 考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面) 文件目录 页面 index.wxml

  • 对YOLOv3模型调用时候的python接口详解

    需要注意的是:更改完源程序.c文件,需要对整个项目重新编译.make install,对已经生成的文件进行更新,类似于之前VS中在一个类中增加新函数重新编译封装dll,而python接口的调用主要使用的是libdarknet.so文件,其余在配置文件中的修改不必重新进行编译安装. 之前训练好的模型,在模型调用的时候,总是在 lib = CDLL("/home/*****/*******/darknet/libdarknet.so", RTLD_GLOBAL)这里读不到darknet编译

  • python在地图上画比例的实例详解

    现在用python画图已经难不倒一直跟小编学习的小伙伴们了,甚至有的小伙伴画图比小编还要厉害.为此小编还偷偷下了一番功夫,画图这种事情,细节上的完善肯定能让图片更加好看.所以小编知道大家会画地图,但是不一定会画地图上的比例尺.毕竟看地图怎么能没有比例尺呢?不会的小伙伴接下来就一起看看吧. 画比例尺的函数为drawmapscale.下图给出了两种比例尺示例. from mpl_toolkits.basemap import Basemap import matplotlib.pyplot as p

随机推荐