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入门开发系列四地图查询(含源代码)