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

数据可视化（3D）"/>

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),	
}]

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

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