第十七章 迁徙连线

已于 2023-11-06 10:19:00 修改
阅读量49 收藏
点赞数
分类专栏： 7.akglobe三维开发_开发三维 文章标签： 前端 javascript 开发语言
于 2023-11-03 11:42:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjltianxin/article/details/134177399
版权

效果

 数据结构

getQysybtj2: {
	"msg": "操作成功",
	"flag": true,
	"rows": [{
		"value": 11,
		"name": "名称",
		"code": 2,
		"longitude": 10.137400,
		"latitude": 8.092329,
		"quantity": 11,
		"rmb": 11.11
	}, {
		"value": 11,
		"name": "名称2",
		"code": 3,
		"longitude": -20.000000,
		"latitude": 24.778300,
		"quantity": 11,
		"rmb": 11.11
	}, ],
	"status": "C00000"
},

 1.获取数据

getDemoData: function() {
		ak_nav.clearAll();
		var temp = {
			// start: sp,
			// end: sp
		};
		var options = new Object();
		options.url = "/manage-api/IndexTjfx1Controller/getQysybtj";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		 
		options.callback = function(data) {
			ak_qianxi2.callBackGET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
			ak_qianxi2.callBackGET(ak_ztqg.getQysybtj2);
		}else{
			akglobe_config.ajaxQuery(options);
		}
	},
	callBackGET:function(data){
		console.log(data);
		var rows = data.rows;
		for (var i = 0; i <= rows.length - 1; i++) {
			for (var j = 0; j < rows.length - i - 1; j++) {
				// 数据库中有坐标数据之后 
				if (rows[j].value > rows[j + 1].value) {
					var temp = rows[j];
					rows[j] = rows[j + 1];
					rows[j + 1] = temp;
				}
			}
		}
		rows.reverse();
		console.log(rows)
		ak_qianxi2.initQinxi(rows);
	},

2.标注

initQinxi: function(rows) {
		var tgas = this;
		tgas.circleArr = [];
		console.log("开始执行");
		//	ak_nav.flyGlobe();
		//ak_nav.c3();
		var geoCoordMap = {
			'北京': [116.4551, 40.2539]
		};
		var waveCircle = new WaveCircle(viewer);
		var obj = {};
		obj.x = 116.4551;
		obj.y = 40.2539;
		obj.color = Cesium.Color.GREENYELLOW;
		waveCircle.createByPosition({
			lng: obj.x,
			lat: obj.y,
			radius: 500000,
			color: obj.color
		});
		ak_commonQuery.waveCircleArr.push(waveCircle);
		var BJData = [];
		for (var i = 0; i < rows.length; i++) {
			var arr = [];
			var name = rows[i].name;
			arr[0] = rows[i].latitude;
			arr[1] = rows[i].longitude;
			// geoCoordMap.['name'] = arr;
			var obj = {};
			obj = {
				[name]: arr
			}
			geoCoordMap = {
				...geoCoordMap,
				...obj
			}
			
			var arr2 = [];
			arr2[0] = {
				name: '北京'
			};
			var obj2 = {};
			obj2.name = name;
			var value = rows[i].value;
			var length1 = rows.length / 3;
			length1 = parseInt(length1);
			var length2 = length1 * 2;
			length2 = parseInt(length2);
			if (i <= length1) {
				value = 88;
			} else if (i > length1 && i <= length2) {
				value = 88;
			} else if (i > length2) {
				value = 88;
			}
			obj2.value = value;
			var code = rows[i].code;
			obj2.code = code;
			arr2[1] = obj2;
			BJData.push(arr2);
		}
		console.log(geoCoordMap);
		console.log(BJData);

		var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = geoCoordMap[dataItem[0].name];
				var toCoord = geoCoordMap[dataItem[1].name];
				if (fromCoord && toCoord) {
					res.push({
						fromName: dataItem[0].name,
						toName: dataItem[1].name,
						toCode: dataItem[1].code,
						coords: [fromCoord, toCoord]
					});
				}
			}
			return res;
		};
		
		var arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5",
			"rgb(0,244,188)", "#139FF0"
		]
		//this.labels =viewer.scene.primitives.add(new Cesium.LabelCollection())
		//var cz=ak_marker.getHxMaterial("",Cesium.Color.CHARTREUSE,2000); AQUA
		var color = Cesium.Color.LAWNGREEN.withAlpha(0.01);
		var material = ak_marker.getFenceMaterial("", color);
		
		var result = convertData(BJData);
		for (var i = 0; i < result.length; i++) {
			var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
			var db = result[i];
			var name = db.toName;
			var jwd = db.coords;
			var code = db.toCode;
			var obj = new Object();
			obj.id = id;
			obj.name = db.toName;
			obj.address = db.toName;
			obj.lat = jwd[1][0];
			obj.lng = jwd[1][1];
			// feature.latitude) || net_tool.isBlank(feature.longitude)

			obj.latitude = jwd[1][0];
			obj.longitude = jwd[1][1];

			obj.tag = 1;
			obj.addtypemarker = config.addtypemarker.ceccQygs;
			obj.code = code;
			obj.attributes = obj; //  设置属性
			obj.radius = 100000; //设置半径
			obj.color = new Cesium.Color(1.0, 1.0, 0.0, 0.05);
			var tt = new geo_circle(obj);
			tt.draw();
			tgas.circleArr.push(tt);

		}

		var color = ['#FF4040', '#666666', '#222222'];
		var series = [];
		[
			['北京', BJData]

		].forEach(function(item, i) {
			series.push({
					coordinateSystem: 'GLMap',
					name: item[0] + ' Top10',
					type: 'lines',
					zlevel: 1,
					effect: {
						show: true,
						period: 6,
						trailLength: 0.7,
						color: '#fff',
						symbolSize: 1
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 0,
							curveness: 0.8
						}
					},
					data: convertData(item[1])
				}

				, {
					coordinateSystem: 'GLMap',
					name: item[0] + ' Top10',
					type: 'lines',
					zlevel: 2,
					symbol: ['none', 'arrow'],
					symbolSize: 12,

					effect: {
						show: true,
						period: 6,
						trailLength: 0,
						symbol: planePath,
						symbolSize: 12
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 1,
							opacity: 0.6,
							curveness: 0.2
						}
					},
					data: convertData(item[1])
				}, {
					name: item[0] + ' Top10',
					type: 'effectScatter',
					coordinateSystem: 'GLMap',
					zlevel: 2,
					rippleEffect: {
						brushType: 'stroke'
					},
					label: {
						normal: {
							show: true,
							position: 'right',
							formatter: '{b}'
						}
					},
					symbolSize: function(val) {
						return val[2] / 8;
					},
					itemStyle: {
						normal: {
							color: color[i]
						}
					},
					data: item[1].map(function(dataItem) {
						return {
							name: dataItem[1].name,
							value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
						};
					})
				},

			);
		});

		option = {
			animation: false,
			GLMap: {

			},
			title: {
				text: '', //模拟迁徙
				subtext: '', //数据纯属虚构
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item'
			},
			
			series: series
		};
		impMap(viewer, option);

	},

设置起始点

循环添加从起始点到中的数据

终点的echarts这个标注不能点击,所以在这个标注最下面我们放置了一个透明的圆,用于识别点击

获取数据,然后放入id一些信息用于识别点击

获取数据设置迁徙的样式

var color = ['#FF4040', '#666666', '#222222'];
        var series = [];
        [
            ['北京', BJData]

        ].forEach(function(item, i) {
            series.push({
                    coordinateSystem: 'GLMap',
                    name: item[0] + ' Top10',
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: '#fff',
                        symbolSize: 1
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.8
                        }
                    },
                    data: convertData(item[1])
                }

                , {
                    coordinateSystem: 'GLMap',
                    name: item[0] + ' Top10',
                    type: 'lines',
                    zlevel: 2,
                    symbol: ['none', 'arrow'],
                    symbolSize: 12,

                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 12
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                }, {
                    name: item[0] + ' Top10',
                    type: 'effectScatter',
                    coordinateSystem: 'GLMap',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function(val) {
                        return val[2] / 8;
                    },
                    itemStyle: {
                        normal: {
                            color: color[i]
                        }
                    },
                    data: item[1].map(function(dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                },

            );
        });

        option = {
            animation: false,
            GLMap: {

            },
            title: {
                text: '', //模拟迁徙
                subtext: '', //数据纯属虚构
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            
            series: series
        };
        impMap(viewer, option);


3.清除

3.1清除透明圆

clearCircle: function() {
		var circleArr = this.circleArr;
		for (var i = 0; i < circleArr.length; i++) {
			var towerItem = circleArr[i];
			towerItem.destroy();
		}
	},

 3.2清除echarts 

3.2.1第一步在nav.js调用清除所有方法

 3.2.2第二步在清除所有方法中有释放所有事件的方法,释放所有事件的方法中有清除echarts的方法

3.2.3第三步 清除echarts

echarts本质上在一个div上面写的,所以我们清除div中的内容即可

disableAllEcharts: function() { 
			var oid = document.getElementById('echarts_div');
			if (oid) {
				viewer.container.removeChild(oid);
			}
		
		},

akglobe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts迁徙图
01-17
ECharts迁徙图是一种利用ECharts库创建的可视化图表，主要用于展示数据的迁移或流动情况。ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它支持丰富的图表类型，包括柱状图、折线图、饼图、散点图以及...
百度迁徙数据.rar
03-01
城内出行强度；迁徙规模指数；2020春运，国庆出行数据
第四章 春夏秋冬，二十四节气
热门推荐
禅与计算机程序设计艺术
03-06 1万+
第四章 春夏秋冬，二十四节气 一切皆是映射。 春夏秋冬 春 甲骨文：春 左边的上下部分是“木 ”字 的 两 半 ，木 的 中 间 是 “日 ”，表 示 太 阳 的 升 起;字形的右边是“屯”，表示种子的扎根发芽。 《说 文 》:“春 ，推 也 。从屮，从日 ，艸，春 时 生 也 ，屯 声 。” “春之从屯 ，形声而会意也。屯下日: 象草木 ...
张小龙“连线”微信公开课：一个人获取信息的宽度决定了他世界的大小
ITValue的专栏
01-09 443
关注ITValue，看企业级最新鲜、最具价值报道！“其实我是故意不来现场的……用产品说话，才是我们应该做的。”在2020微信公开课PRO上，腾讯公司高级执行副总裁、微信事业群总裁张小龙...
04 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制
X北辰北的博客
03-29 2836
概述 前面两篇文章通过扩展EchartsLayer.js这个图层类，实现了使用ArcGIS JS API和eCharts，在二维和三维场景下绘制迁徙图和散点图。这篇文章继续通过绘制网络路径图的例子，再来验证下我们扩展的这个图层类是否可用，先来看下最终效果： 实现思路 迁徙图、散点图和网络路径图这种图表跟地理坐标关系紧密，所以仅仅通过第一篇二维普通图表绘制的方式是无法实现这...
产品读书《失控：全人类的最终命运和结局》KK
女王の专属领地
05-03 5640
凯文·凯利，当今世界最受关注的未来学家，也被人们亲切的称为“KK”。美国著名杂志《连线》第一任主编，也做过乔布斯最喜欢的杂志《全球概览》的编辑和出版人。凯文·凯利生活经历丰富，涉猎广泛，曾做过作家、摄影家、未来学家。他的文章和作品多次出现在《经济学人》、《时代》、《科学》等重量级媒体和刊物上。除了《失控》外，还著有《必然》、《科技想要什么》等力作。 《失控》写于1994年。全书...
百度地图+eChart实现动态迁徙图
05-29
在本项目中，我们将探讨如何使用百度地图API与ECharts数据可视化库来创建一个动态的迁徙图。这种图表能够生动地展示人口或物体在不同地理位置间的流动情况，常用于研究人口迁移、交通流量分析等领域。 首先，让我们...
人口迁徙大数据.zip
02-02
数据名称：百度迁徙大数据爬取整理版，数据已整理好，可直接用于研究 数据来源：百度地图-迁徙大数据 数据格式：excel格式 数据日期：与官网一致 迁入/迁出指数： 2020.01.01-------2022.04.21
乘势而上：人才流动与迁徙2022.pdf
04-12
乘势而上：人才流动与迁徙2022.pdf乘势而上：人才流动与迁徙2022.pdf乘势而上：人才流动与迁徙2022.pdf乘势而上：人才流动与迁徙2022.pdf乘势而上：人才流动与迁徙2022.pdf乘势而上：人才流动与迁徙2022.pdf乘势而上...
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
qq_30193097的博客
08-13 204
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 578
ASP.NET Core Web API 使用Autofac框架
前端JS总结（中）
m0_54066656的博客
08-12 696
前端JS之内置对象总结，这很重要！！！
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 265
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 601
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 170
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 441
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
前端学习笔记-JS篇-04
Yvonne_hjj的博客
08-14 615
函数:function,是被设计为执行特定任务的代码块说明:函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于。比如前面使用的alert()、prompt()和console.log()都是一些，只不过已经封装好了，我们直接使用的。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 560
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
移动应用趋势：生态变迁与网络迁徙
“胡延平-生态之变与网络迁徙”主要探讨了互联网生态环境的变化，特别是移动应用（App）、Web应用（WebApp）以及传统Website和Software应用的发展趋势。报告指出，随着移动设备的普及，Website的访问比例相对下降，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

akglobe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值