前言
最近公司有个 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();
}
})
},
……
……