arcgis api for js入门开发系列十六迁徙流动图
2017-12-26 本文已影响50人
gis之家
最近公司有个arcgis api for js的项目，需要用到百度echarts迁徙图效果，而百度那个效果实现是结合百度地图的，怎么才能跟arcgis api结合呢，网上搜索，终于在github找到了，github源代码地址https://github.com/wandergis/arcgis-echarts；在此，非常感谢原创作者wandergis无私奉献；
整合进去自己demo的效果图如下：
1.png
实现思路：
1.自定义EchartsLayer类，为了把echarts迁徙图的渲染效果跟esri的地图map绑定在一起，比如渲染图效果的d放在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)
});
};
具体的可以看github源代码
2.echarts迁徙图的模拟数据构造，这里自己稍微修改了的，跟github源代码的构造数据不一致：
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 }
]
}
}
]
};
3.调用实现：
loadMoveEchartsMap: function (map) {
var overlay = new moveEchartsMap.EchartsLayer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
window.onresize = myChart.onresize;
overlay.setOption(option);
}
备注：团队承接webgis/gis毕业设计以及webgis项目等业务，欢迎有相关需求的客户来咨询
GIS之家接受webgis开发遇到的技术疑点难点在线咨询收费模式，有需要的加QQ:406503412，具体详情见：咨询模式
个人微信:gishome
欢迎关注GIS之家团队的微信公众号:扫描右上角头像
GIS作品：GIS之家
GIS之家知乎专栏：GIS之家知乎专栏
GIS之家交流群一：432512093(已满)
GIS之家交流群二：296438295(已满)
GIS之家交流群三：632467934
