版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yy284872497/article/details/85103310
一、ArcGIS API for Javascript 4.x结合Echarts4
使用过Echarts
和ArcGIS API for Javascript
的GISer都知道,目前关于二者3版本
相结合的学习资料已经有很多,并且在Echarts官网的扩展下载中有相关的链接。
但是随着Echarts和ArcGIS API for Javascript版本的不断更新,目前关于4版本的相关学习资料较少,为此本篇博客主要跟大家分享一下基于4版本
的数据渲染。
下面是使用4版本的demo截图:
- demo1-散点图渲染
- demo2-动态线渲染
二、版本
ArcGIS API for Javascript
:目前最新版本4.10
Echarts
:4版本
三、使用介绍
1、文件引用
将ArcGISEcharts4.js
文件加载到页面,注意,该文件要写在ArcGIS API的init.js
之前。我这里的init.js
引用了官方网站的链接,代码如下:
<script src="ArcGISEcharts4.js"></script>
<script src="https://js.arcgis.com/4.10/init.js"></script>
2、加载EchartsLayer模块
EchartsLayer模块为我们自己定义的模块,所以说需要用到dojoConfig
来配置模块路径/src
:
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "src",
location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
}]
};
require(["src/EchartsLayer4", "dojo/domReady!"], function (EchartsLayer) {
......
});
3、初始化echarts对象
var overlay = new EchartsLayer(mapView, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
4、设置option
overlay.setOption(option);
5、清除渲染
这里重点强调一下数据清除的使用,之前在网上看到好多人在问怎么清除地图上渲染的数据,我这里提供了一个deleteECharts
方法,可以实现数据的清除,代码如下:
overlay.deleteECharts();
当然,当我们想对渲染数据的进行更新,可以结合第四步和第五步来实现数据的动态更新。
最后是demo示例的下载链接ArcGIS API4.X+Echarts4数据可视化示例,需要的小伙伴可以下载呦!!!