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

前言

關於本篇功能實現用到的 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之家小專欄

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