Arcgis api 4.x集成 Echarts实现二三维点状图和迁徙图
由于Arcgis api 4.x版本与3.x版本相比改动较大，重要的是增加了越来越火的三维效果，因此本文用Arcgis api最新版本4.8集成了echarts最新版本4.x，这里暂时主要实现了点状图和二三维迁徙图的效果，下面对其进行概括介绍。
在arcgis api集成echarts中，一个最重要的点就是需要解决echarts坐标系与arcgis的坐标系不统一出现的问题，因此要进行echarts坐标系与arcgis坐标系的转换，这里采用的方法是注册一个坐标系统命名为arcgis（名称可自由拟定）的坐标系，注册arcgis坐标系方法如下：
registerCoordinateSystem('arcgis', getE3CoordinateSystem(view));
在getE3CoordinateSystem函数中，对echarts里面的几个函数进行了重写，其中主要包含dataToPoint、pointToData等坐标转换内容。下面列出重写datatoPoint部分代码：
CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
var point = {
type:"point",
x:data[0],
y:data[1],
spatialReference:map.spatialReference
};
var px = map.toScreen(point);
var mapOffset = this._mapOffset;
return [px.x - mapOffset[0], px.y - mapOffset[1]];
}
1.点状图效果的实现
点状图效果展示如下:
实现点状图时，将其option里面的参数设置在point.js里面，point.js中需要注意其中两个参数，第一个是series里面的coordinateSystem坐标系统参数设置为我们上面提到的自定义坐标系的名称arcgis，第二个是series里面的type类型参数设置为effectScatter类型，具体代码如下：
"series": [
{
"coordinateSystem": 'arcgis',
"type": "effectScatter",
"symbolSize": 10,
"hoverAnimation": true,
"itemStyle": {
"color": "rgba(60,53,212,1)",
"borderColor": "rgba(60,53,212,0.4)",
"borderWidth": 10
},
"data": [
{
"value": [139768.3512784773 ,40336.52033637449],
"itemStyle": {
"normal": {
"color": '#df27ba'
}
}
}, {
"value": [143377.13448869827, 34190.918317994256],
"itemStyle": {
"normal": {
"color": '#3e31df'
}
}
}, {
"value": [149523.23085095224, 37743.22494963202],
"itemStyle": {
"normal": {
"color": '#dfdf83'
}
}
}
],
}, {
"zlevel": 5,
"type": "scatter",
}
]
2.二三维迁徙图的实现
二三维迁徙图效果如下图：
在实现二三维迁徙图功能中，将其option也配置在fly.js文件中，大体上其option配置项中与点状图相似，其主要不同主要体现在series里面type类型变为lines属性，其次在data的数据结构也有点状图有所不同，其数据结构如下：
[
{
coords:[[x1,y1],[x2,y2]],
lineStyle: {
normal: { color: ''}
}
} ,
{
coords:[[x3,y3],[x4,y4]],
lineStyle: {
normal: { color: ''}
}
}
]
在fly.js中其series配置代码如下：
"series": [
{
"coordinateSystem": 'arcgis',
"type": "lines",
"data": [
{ coords:[[145650.2125361834,35475.377907489725],
[147863.73907776905, 32854.252960976206]],
lineStyle: {
normal: {
color: '#5A94DF'
}
}
},
{ coords:[[145650.2125361834,35475.377907489725],
[143285.08473504276,31947.453129980713]],
lineStyle: {
normal: {
color: '#c653df'
}
}
}
],
"effect": {
"show": true,
"period": 6,
"trailLength": 0.7,
"color": '#fff',
"symbolSize": 3
},
"silent": true,
"lineStyle": {
"normal": {
"color": "#fdf824",
"width": 0.1,
"curveness": 0.2
}
},
"zlevel": 1,
},
{
"coordinateSystem": 'arcgis',
"type": "lines",
"data": [
{ coords:[[145650.2125361834,35475.377907489725],
[147863.73907776905, 32854.252960976206]],
lineStyle: {
normal: {
color: '#5A94DF'
}
}
},
{ coords:[[145650.2125361834,35475.377907489725],
[143285.08473504276,31947.453129980713]],
lineStyle: {
normal: {
color: '#c653df'
}
}
},
],
"lineStyle": {
"normal": {
"color": "#fdd1bf",
"width": 1,
"opacity": 0.4,
"curveness": 0.2
}
},
"effect": {
"show": true,
"period": 6,
"trailLength": 0,
"symbol": 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
"symbolSize": 15
},
"zlevel": 2,
},
{
name: '2',
type: 'effectScatter',
coordinateSystem: 'arcgis',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 10,
itemStyle: {
normal: {
color: "#0f19fd"
}
},
data: [
{
name: "2222",
value:[149852.10436049147, 39369.23614401659],
itemStyle: {
normal: {
color: '#85dfbc'
}
}
},
{
name: "1111",
value:[152048.29245357122,30062.143397137097],
itemStyle: {
normal: {
color: '#29df95'
}
}
}
],
}
]
3.总结
上面即完成Arcgis api 4.x版本集成最新echarts4.x版本，实现了点状图和二三维迁徙图的功能效果，总之，最关键的部分就是注册坐标系统和使用，只要抓住了这个思路，实现该功能就会很容易了，而且这种方法是可以自己定义任意坐标系，不受坐标系的限制。我还尝试了做一点三维柱状图的效果，但是目前在webGL方面还没研究透彻，如果有实现了该功能的朋友们欢迎分享。