arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 4.x 的好素材。
参考资料
https://blog.csdn.net/weixin_39676449/article/details/82155812
https://blog.csdn.net/yy284872497/article/details/85228643
https://github.com/xcsf/ArcGIS-API-for-JS-with-Echarts
arcgis api 4.x for js 集成 echarts 实现迁徙图效果的关键问题在于 echarts 坐标系以及 arcgis 坐标系不一致,因此要进行 echarts坐标系与 arcgis 坐标系的转换,这里采用的方法是注册一个坐标系统命名为 arcgis(名称可自由拟定)的坐标系。在此基础上,采用 dojo 的 define 定义了一个名为 EchartsLayer 的模块。
define(["dojo/_base/declare", "dojo/_base/lang", "esri/geometry/Point", "esri/geometry/SpatialReference"],
function (declare, lang, n, SpatialReference) {
return declare("EchartsLayer", null, {
name:"EchartsLayer",
view: null,
box: null,
chart: null,
chartOption: null,
visible:true,
constructor: function (view, option) { echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));
this.init(view,option);
},
init:function(view, option) {
this.setBaseMap(view);
this.createLayer();
//this.setChartOption(option); },
……
最终实现效果图:
2D 视图效果
3D 视图效果
创建 EchartsLayer 模块的构造函数,需要注册 arcgis 坐标系函数
//需要先引用echarts.js
echarts.registerCoordinateSystem('arcgis', this.defineCoordinateSystem(view));
在 defineCoordinateSystem() 函数中,对 echarts 里面的几个函数进行了重写,其中主要包含 dataToPoint、pointToData 等坐标转换内容。
- dataToPoint 函数重写
CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
var point = {
type:"point",
x:data[0],
y:data[1],
spatialReference:new SpatialReference(4326)
};
var px = map.toScreen(point);
var mapOffset = this._mapOffset;
return [px.x - mapOffset[0], px.y - mapOffset[1]];
}
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)的更多相关文章
- arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Echarts4+EchartsGL 3D迁徙图(附源码)
最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...
- arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- vue集成cesium,webgis平台第一步(附源码下载)
vue-cesium-platform Vue结合Cesium的web端gis平台 初步效果 笔记本性能限制,运行Cesium温度飙到70度以上.所以平时开发时先开发界面,之后加载Cesium地球 当 ...
- arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
随机推荐
- Java对象导论
Java对象导论 1.1 抽象过程 万物皆对象. 程序是对象的集合(即:类),他们通过发送消息(调用方法)来告知彼此要做的. 每个对象都有自己的由其他对象所构成的存储(引用其他对象或基本类型,即组合) ...
- 从零开始的vue学习笔记(五)
单文件组件 Vue.component 来定义全局组件的缺点: 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String te ...
- Eureka+SpringBoot2.X结合Security注册中心安全验证
当我们直接配置完SpringCloudEureka的时候,任何人直接就可以访问,这样是极不安全的!!外网的情况下是绝对不允许的! 好在有提供了解决方案,下面拿为我们提供的Security解决 Spri ...
- Java 读取excel表格文件
注意,本文使用的Jar包为jxl.jar,只能处理97-03版本xls格式的Excel jar包 maven依赖: <dependency> <groupId>net.sour ...
- How to: Use the Entity Framework Data Model Located in an External Assembly 如何:使用位于外部程序集中的EF数据模型
If you have a non-XAF application, and want to develop an XAF application that utilizes the same dat ...
- Oracle 常用函数积累
①length 函数说明:计算字符串长度的函数 返回结果:数字 使用图解: ②lengthb 函数说明:计算字符串字节长度.在学习过程中,了解到还有一个 lengthb 函数.字节和字符的区别 返回结 ...
- Android8.1 SystemUI源码分析之 Notification流程
代码流程 1.先看UI显示,StatuBar加载 CollapsedStatusBarFragment 替换 status_bar_container(状态栏通知显示区域) SystemUI\src\ ...
- appium---模拟点击事件
在做自动化的过程中都会遇到一些无法定位到的地方,或者通过元素怎么都定位不成功的地方,这个时候我们可以使用必杀技,通过坐标定位.具体的怎么操作呢? swipe点击事件 前面安静写过一篇关于swipe的滑 ...
- Centos8 配置静态IP
安装centos 8之后,重启启动网络时,会出现以下报错 报错信息如下: Failed to start network.service: Unit network.service not found ...
- pip命令详解
使用详解 1.pip安装软件 # pip install SomePackage 2.pip查看已安装的软件 # pip show --files SomePackage 3.pip检查哪些软件需要更 ...