arcgis api 3.x for js 入门开发系列十六迁徙流动图
2023-09-11 14:19:51 时间
前言
关于本篇功能实现用到的 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之家小专栏
对本专栏感兴趣的话,可以关注一波
相关文章
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQuery.js)点赞按钮动画
- js中如何在不影响既有事件监听的前提下新增监听器
- 什么?java中居然可以执行js代码了?真是不知者不怪
- [AaronYang]那天有个小孩跟我说Js正则
- JS插件之——bootstrap-suggest.js
- js表单动态添加数据并提交
- js 获取元素所有兄弟节点实例
- js题目小记
- [Next.js] Hide Sensitive Information from the Consumers of Next.js API
- [Node.js] Creating Demo APIs with json-server
- [Next.js] Hide Sensitive Information from the Consumers of Next.js API
- JS获取当前网址信息
- Immutable.js学习笔记
- Atitit. 注册表操作查询 修改 api与工具总结 java c# php js python 病毒木马的原理
- Atitit. 注册表操作查询 修改 api与工具总结 java c# php js python 病毒木马的原理
- Atitit.跨语言反射api 兼容性提升与增强 java c#。Net php js
- Atitit.跨语言反射api 兼容性提升与增强 java c#。Net php js
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- 华为OD机试 - 勾股数元组(Java & JS & Python)
- 如何使用 Node.js Stream API 减少服务器端内存消耗?
- js: 监听键盘按键事件KeyboardEvent
- leetcode 15. 三数之和 js实现
- js实现发布订阅模式
- Nuxt.js项目实战部署
- 070:vue+openlayers 引用封装js测量距离和面积(示例代码)
- JS 高级(二)闭包、封装
- js 数组、对象转json 以及json转 数组、对象
- js点击收缩展开文本(不能用废弃)
- js进度条载入demo效果示例(整理)