ArcGIS API for Javascript 4.X扩展Echarts4.2.0三维数据可视化（3D）

ArcGIS API for Javascript 4.x扩展Echarts4三维渲染

上一篇博客主要介绍了ArcGIS API for Javascript 4.X结合Echarts 4实现了二维地图上的数据渲染，包括散点图和轨迹图，对应series里的scatter、effectScatter、lines。
本篇博客主要介绍基于三维地图上的数据渲染，如下图所示为经典的模拟迁徙的渲染效果：
在这里插入图片描述
二者集成有一个最重要的问题就是坐标系不统一，因此要进行echarts坐标系与arcgis坐标系的转换，这里采用的方法借鉴了业余敲代码的思路，即自己注册一个坐标系统：命名为arcgis（名称可自由拟定）的坐标系。在此基础上，我采用dojo的define定义了一个名为EchartsglLayer的模块，其中注册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)  //WGS84坐标系
	 };
   	 var px = view.toScreen(point);
   	 var mapOffset = this._mapOffset;
   	 return [px.x - mapOffset[0], px.y - mapOffset[1]];
}

坐标系定义我统一使用了WGS84坐标系【wkid:4326】，下边示例中的数据对应的都是经纬度；参数view为定义的场景对象，代码如下：

var view = new SceneView({
	center: [110.62, 36.32],
	container: 'map',
	map: map,
	zoom: 4
});

使用版本

目前最新的版本：

ArcGIS API for Javascript 4.10
Echarts 4.2.0

文件引用

首先引入echarts.min.js，然后配置我们自定义模块的路径，之后加载ArcGIS API for Javascript 4.10版本的init.js，最后使用require加载自定义的EchartsglLayer，具体代码如下：

<script src="echarts.min.js"></script>
<script>
var dojoConfig = {
    parseOnLoad: true,
    packages: [{
        name: "src",
        location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
    }]
};
</script>
<script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script>
<script>
require([
     "esri/Map",
	 "src/EchartsglLayer",
     "esri/views/SceneView",
     "dojo/domReady!"], 
function (Map, EchartsglLayer, SceneView) {
	... ...
});
</script>

渲染示例

本篇博客使用到的数据来源于Echarts官网社区gallery，关于option属性配置需要注意一点：coordinateSystem属性需要配置成我们自定义的坐标系：arcgis，例如：

series: [{
	name: 'pm2.5',
	coordinateSystem: 'arcgis',
	type: "scatter",
	symbolSize: function (val){
		return val[2] / 8;
	},
	hoverAnimation: true,
	itemStyle: {
		normal: {
			color: "rgba(255,53,0)",
		}
	},
	data: convertData(data),	
}]

下面列举了三个具体的示例：

全国主要城市空气质量
出租车运行轨迹
北京市公交路线