arcgis api for js入门开发系列十六迁徙流动图

Posted GIS之家

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arcgis api 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之家小专栏

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

以上是关于arcgis api for js入门开发系列十六迁徙流动图的主要内容,如果未能解决你的问题,请参考以下文章

arcgis api for js入门开发系列十九图层在线编辑

arcgis api for js入门开发系列二不同地图服务展示(含源代码)

arcgis api for js入门开发系列十七在线地图(天地图百度地图高德地图)

arcgis api for js入门开发系列四地图查询(含源代码)

arcgis api for js入门开发系列二十一气泡窗口信息动态配置模板

ArcGIS API for JavaScript小白入门