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方面還沒研究透徹，如果有實現了該功能的朋友們歡迎分享。