arcgis api 3.x for js 入門開發系列十六遷徙流動圖

最近公司有個arcgis api for js的項目，需要用到百度echarts遷徙圖效果，而百度那個效果實作是結合百度地圖的，怎麼才能跟arcgis api結合呢，網上搜尋，終于在github找到了，github源代碼位址：https://github.com/wandergis/arcgis-echarts；在此，非常感謝原創作者wandergis無私奉獻

前言

關于本篇功能實作用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，裡面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是線上例子：esri 官網線上例子，這個也是學習 arcgis api 3.x 的好素材。

最近公司有個 arcgis api 3.x for js 的項目，需要用到百度 echarts 遷徙圖效果，而百度那個效果實作是結合百度地圖的，怎麼才能跟 arcgis api 結合呢，網上搜尋，找到解決方案，整合進去自己 demo 的效果圖如下：

實作思路

• 自定義 EchartsLayer 類，為了把 echarts 遷徙圖的渲染效果跟 esri 的地圖 map 綁定在一起，比如渲染圖效果的放在 map 地圖容器裡面

var div = this._echartsContainer =
document.createElement('div');
div.style.position = 'absolute';
div.id = "moveecharts_Map";
div.style.height = map.height + 'px';
div.style.width = map.width + 'px';
div.style.top = 0;
div.style.left = 0;
map.__container.appendChild(div);      

• 地圖的綁定系列事件

/**
* 綁定地圖事件的處理方法
*
* @private
*/
self._bindEvent = function() {
self._map.on('zoom-end', function(e) {
self.setOption(self._option);
});
self._map.on('zoom-start', function(e) {
self._ec.clear();
});
self._map.on('pan', function(e) {
self._ec.clear();
});
self._map.on('pan-end', function(e) {
self.setOption(self._option);
});
 
self._ec.getZrender().on('dragstart', function(e) {
self._map.disablePan();
//self._ec.clear();
});
self._ec.getZrender().on('dragend', function(e) {
self._map.enablePan();
//self.setOption(self._option);
});
self._ec.getZrender().on('mousewheel', function(e) {
self._ec.clear();
self._map.emit('mouse-wheel', e.event)
});
};      

• echarts 遷徙圖的模拟資料構造

var option = {
color: ['gold', 'aqua', 'lime'],
tooltip: {
trigger: 'item',
formatter: '{b}'
},
dataRange: {
show:false,
min: 0,
max: 100,
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: '大連市',
type: 'map',
roam: true,
hoverable: false,
mapType: 'none',
itemStyle: {
normal: {
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
areaStyle: {
color: '#1b1b1b'
}
}
},
data: [],
markLine: {
smooth: true,
symbol: ['none', 'circle'],
symbolSize: 1,
itemStyle: {
normal: {
color: '#fff',
borderWidth: 1,
borderColor: 'rgba(30,144,255,0.5)'
}
},
data: [
[{ name: '大連基地' }, { name: '到達#1' }],
[{ name: '大連基地' }, { name: '到達#2' }],
[{ name: '大連基地' }, { name: '到達#3' }],
[{ name: '大連基地' }, { name: '到達#4' }],
[{ name: '大連基地' }, { name: '到達#5' }],
[{ name: '大連基地' }, { name: '到達#6' }],
[{ name: '大連基地' }, { name: '到達#7' }],
[{ name: '大連基地' }, { name: '到達#8' }],
[{ name: '大連基地' }, { name: '到達#9' }],
[{ name: '大連基地' }, { name: '到達#10' }],
[{ name: '大連基地' }, { name: '到達#11' }],
[{ name: '大連基地' }, { name: '到達#12' }],
[{ name: '大連基地' }, { name: '到達#13' }],
[{ name: '大連基地' }, { name: '到達#14' }],
[{ name: '大連基地' }, { name: '到達#15' }],
[{ name: '大連基地' }, { name: '到達#16' }],
[{ name: '大連基地' }, { name: '到達#17' }],
[{ name: '大連基地' }, { name: '到達#18' }],
[{ name: '大連基地' }, { name: '到達#19' }],
[{ name: '大連基地' }, { name: '到達#20' }]
],
},
geoCoord: {
'大連基地': [121.939, 39.703],
'到達#1': [121.563, 39.582],
'到達#2': [121.579, 39.411],
'到達#3': [121.715, 39.401],
'到達#4': [121.746, 39.278],
'到達#5': [121.613, 39.027],
'到達#6': [121.768, 39.066],
'到達#7': [121.921, 39.414],
'到達#8': [121.941, 39.089],
'到達#9': [122.088, 39.206],
'到達#10': [122.214, 39.342],
'到達#11': [121.979, 39.357],
'到達#12': [121.091, 39.541],
'到達#13': [122.397, 39.421],
'到達#14': [122.649, 39.534],
'到達#15': [122.955, 39.652],
'到達#16': [122.512, 39.691],
'到達#17': [122.183, 39.622],
'到達#18': [122.288, 39.803],
'到達#19': [122.119, 39.911],
'到達#20': [122.133, 39.629]
}
},
{
name: '大連市 Top10',
type: 'map',
mapType: 'none',
data: [],
markLine: {
smooth: true,
effect: {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data: [
[{ name: '大連基地' }, { name: '到達#1', value: 95 }],
[{ name: '大連基地' }, { name: '到達#2', value: 90 }],
[{ name: '大連基地' }, { name: '到達#3', value: 80 }],
[{ name: '大連基地' }, { name: '到達#14', value: 70 }],
[{ name: '大連基地' }, { name: '到達#5', value: 60 }],
[{ name: '大連基地' }, { name: '到達#16', value: 50 }],
[{ name: '大連基地' }, { name: '到達#7', value: 40 }],
[{ name: '大連基地' }, { name: '到達#18', value: 30 }],
[{ name: '大連基地' }, { name: '到達#9', value: 20 }],
[{ name: '大連基地' }, { name: '到達#20', value: 10 }]
]
},
markPoint: {
symbol: 'emptyCircle',
symbolSize: function (v) {
return 10 + v / 10
},
effect: {
show: true,
shadowBlur: 0
},
itemStyle: {
normal: {
label: { show: false }
},
emphasis: {
label: { position: 'top' }
}
},
data: [
{ name: '到達#1', value: 95 },
{ name: '到達#2', value: 90 },
{ name: '到達#3', value: 80 },
{ name: '到達#14', value: 70 },
{ name: '到達#5', value: 60 },
{ name: '到達#16', value: 50 },
{ name: '到達#7', value: 40 },
{ name: '到達#18', value: 30 },
{ name: '到達#9', value: 20 },
{ name: '到達#20', value: 10 }
]
}
}
]
};      

• 調用實作

• //遷徙圖

DCI.moveEcharts.Init(map);      

if (typeof DCI == "undefined") { var DCI = {}; }
DCI.moveEcharts = {
map: null,
//子產品初始化函數
Init: function (map) {
DCI.moveEcharts.map = map;
//監聽check點選事件
$("#moveEchartsLayer input").bind("click", function () {
if (this.checked) {
DCI.moveEcharts.loadMoveEchartsMap(DCI.moveEcharts.map);
}
else {
$("#moveecharts_Map").remove();
}
})
},
……
……      

更多的詳情見：GIS之家小專欄

對本專欄感興趣的話，可以關注一波

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢