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之家小专栏

对本专栏感兴趣的话，可以关注一波