第六章 最近距离

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

效果

数据结构

 

{
	"xiangZhen": [{
		"name": "名称",
		"geom": "POINT(116.789 39.7218)",
		"x": 116.785,
		"y": 39.72
	}, {
		"name": "名称",
		"geom": "POINT(116.78 39.722)",
		"x": 116.78,
		"y": 39.722
	}],
	"nongcun": [{
		"name": "名称",
		"geom": "POINT(116.7 39.72)",
		"x": 116.77,
		"y": 39.7
	}, {
		"name": "名称",
		"geom": "POINT(116.77 39.73)",
		"x": 116.7,
		"y": 39.7
	}],
	"qianDun": [{
		"name": "名称",
		"geom": "POINT(116.74179.638153)",
		"x": 116.74178,
		"y": 39.638153
	}, {
		"name": "名称",
		"geom": "POINT(116.7476 39.628)",
		"x": 116.7476,
		"y": 39.62876
	}]
}

1.获取数据

点击按钮后,获取当前点位信息.  根据这个已经标注的点位,查询最近的设备

根据编码查询坐标,  实际应用也可以用 地图点击,获取xy 

 获取到当前x跟y坐标后,传给后台,后台返回最近点位信息

下面 获取了三种数组的数据,根据实际情况 自行调整

getSyjData: function(object) {
		var x = object.x;
		var y = object.y;
		var options = new Object();
		var temp = {
			x: x,
			y: y
		}
		options.url = "/manage-api/fanWei/zuiJin";
		options.type = "GET";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		options.callback = function(data) {
			if (!data) return;
			console.log(data)
			ak_xq_syj.clearObject();
			ak_commonQuery.clear();
			var nongcun = data.nongcun;
			var nongcunArr = nongcun[0];
			var qianDun = data.qianDun;
			var qianDunArr = qianDun[0];
			var xiangZhen = data.xiangZhen;
			var xiangZhenArr = xiangZhen[0];
			var center = {};
			center.lon = x;
			center.lat = y;
			var cities = [];
			var nongcunObj = new Object();
			nongcunObj.lon = nongcunArr.x;
			nongcunObj.lat = nongcunArr.y;
			nongcunObj.type = 1;
			nongcunArr.type = 1;
			cities.push(nongcunObj)
			var qianDunObj = new Object();
			qianDunObj.lon = qianDunArr.x;
			qianDunObj.lat = qianDunArr.y;
			qianDunObj.type = 2;
			qianDunArr.type = 2;
			cities.push(qianDunObj)
			var xiangZhenObj = new Object();
			xiangZhenObj.lon = xiangZhenArr.x;
			xiangZhenObj.lat = xiangZhenArr.y;
			xiangZhenObj.type = 3;
			xiangZhenArr.type = 3;
			cities.push(xiangZhenObj)
			ak_xq_syj.showDmline2(center, cities)	// 两点之间绘制线路
			var rows = [];
			// rows.push(object);
			rows.push(nongcunArr);
			rows.push(qianDunArr);
			rows.push(xiangZhenArr);
			ak_xq_syj.xq_syj_position(rows);
		}
		akglobe_config.ajaxQuery(options);
	},

 2.获取数据后进行两点直接连线

showDmline2: function(center, cities) {
		var obj = new Object();
		obj.center = center;
		obj.cities = cities;
		obj.speed = 10;
		obj.repeat = 10;
		obj.image = 'css/images/animateWall/wh1.png';
		obj.width = 11;
		obj.color = Cesium.Color.YELLOW;
		// ak_commonQuery.addDmLineObj(obj);

		this.geoCollectionLine1 = new Cesium.PrimitiveCollection();
		this.labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
		viewer.scene.primitives.add(this.geoCollectionLine1);
		// guanghuan
		for (obj in cities) {
			var ok = cities[obj];
			var material = null;
			if (ok.type == 1) {
				var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
				material.uniforms.color = Cesium.Color.BLACK; // SKYBLUE CRIMSON

				material.uniforms.speed = 7;
				material.uniforms.repeat = 10;
				material.uniforms.image =
					'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
			} else if (ok.type == 2) {
				var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
				material.uniforms.color = Cesium.Color.CRIMSON; // SKYBLUE CRIMSON

				material.uniforms.speed = 7;
				material.uniforms.repeat = 10;
				material.uniforms.image =
					'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
			} else if (ok.type == 3) {
				var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
				material.uniforms.color = Cesium.Color.SKYBLUE; // SKYBLUE CRIMSON

				material.uniforms.speed = 7;
				material.uniforms.repeat = 10;
				material.uniforms.image =
					'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
			}
			//clickSaoMiao  clicklabelNew2
			ak_commonQuery.clicklabelNew2({
				"name": "北京市通州候黄庄电镀厂",
				"address": "漷县镇镇",
				"latitude": ok.lon,
				"longitude": ok.lat,
				"radius": 20,
				"color": Cesium.Color.YELLOW,
			});

			var start = [center.lon, center.lat];
			var end = [ok.lon, ok.lat];
			var arr = [];
			arr.push(start);
			arr.push(end);
			var newcas = cCesium.lnglatArrToCartesianArr(arr);
			var obj = new Object();
			var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
			obj.name = "ss"
			obj.address = "";
			obj.addtypemarker = config.addtypemarker.common;
			obj.cartions = newcas;

			obj.material = material;
			obj.width = 6;
			var line1 = ak_pm_tool.addLineReGeom(this.geoCollectionLine1, obj);
			var startPosition = Cesium.Cartesian3.fromDegrees(center.lon, center.lat)
			var endPosition = Cesium.Cartesian3.fromDegrees(ok.lon, ok.lat, 10)
			var distance = Cesium.Cartesian3.distance(startPosition, endPosition)
			distance = distance.toFixed(2) + "米";
			console.log(distance);

			var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
			var obj = new Object();
			obj.id = "ztqgGj;" + config.addtypemarker.common;
			// +";"+db.name+";"+id+";"+db.name
			obj.name = distance;

			obj.lat = ok.lon;
			obj.lng = ok.lat;
			obj.fillColor = Cesium.Color.RED;
			obj.outlineWidth = 2;
			//  obj.showBackground=true;
			obj.addtypemarker = config.addtypemarker.common;
			ak_pm_tool.addLabel(this.labels, obj);

		}
	},

代码解释如下:

测距:

            var startPosition = Cesium.Cartesian3.fromDegrees(center.lon, center.lat)
            var endPosition = Cesium.Cartesian3.fromDegrees(ok.lon, ok.lat, 10)
            var distance = Cesium.Cartesian3.distance(startPosition, endPosition)
            distance = distance.toFixed(2) + "米";

标注文本距离:

var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
            var obj = new Object();
            obj.id = "ztqgGj;" + config.addtypemarker.common;
            // +";"+db.name+";"+id+";"+db.name
            obj.name = distance;

            obj.lat = ok.lon;
            obj.lng = ok.lat;
            obj.fillColor = Cesium.Color.RED;
            obj.outlineWidth = 2;
            //  obj.showBackground=true;
            obj.addtypemarker = config.addtypemarker.common;
            ak_pm_tool.addLabel(this.labels1, obj);

绘制线路:

 将经纬度坐标,放到数组内,统一转换坐标,然后形成 cesium坐标数组,构建线路

 赋予材质信息

var start = [center.lon, center.lat];
            var end = [ok.lon, ok.lat];
            var arr = [];
            arr.push(start);
            arr.push(end);
            var newcas = cCesium.lnglatArrToCartesianArr(arr);
            var obj = new Object();
            var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
            obj.name = "ss"
            obj.address = "";
            obj.addtypemarker = config.addtypemarker.common;
            obj.cartions = newcas;

            obj.material = material;
            obj.width = 6;
            var line1 = ak_pm_tool.addLineReGeom(this.geoCollectionLine1, obj);
            

  材质的写法:

  这是一种 线路动画的写法,  也可以用简单的颜色

           var material = null;
            var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
            material.uniforms.color = Cesium.Color.CRIMSON; //  表示将材质的颜色  颜色使用变量配置  CRIMSON:深红色
            material.uniforms.speed = 7; //速度
            material.uniforms.repeat = 10;  //重复属性
            material.uniforms.image = 'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1   图片

在获取数据时会有多个不同的点位,所以ok.type是根据不同点位类型而去绘制不同的材质样式.

        var ok = cities[obj];
            var material = null;
            if (ok.type == 1) {
                var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
                material.uniforms.color = Cesium.Color.BLACK; // SKYBLUE CRIMSON

                material.uniforms.speed = 7;
                material.uniforms.repeat = 10;
                material.uniforms.image =
                    'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
            } 

3.后台代码

 @RequestMapping(value = "/zuiJin", method = RequestMethod.GET)
    public Map list(HttpServletRequest request) {
            Map map = new HashMap();
            Map  mapuser= getParametersUserinfo(request);
            StringBuilder sbd = new StringBuilder();
            sbd.append(" SELECT    name,  ST_AsText(geom) as geom,ST_X(geom) as x,ST_Y(geom) as y  FROM   geo_nongcun_shuiyuanjing_point ");
            sbd.append("where  1=1  ORDER BY  geom <-> GeomFromEWKT('SRID=4326;POINT(");
            sbd.append(mapuser.get("x").toString()+" "+mapuser.get("y").toString());
            sbd.append(" )') limit 5");
            String sql = sbd.toString();
            List list = jdbcTemplate.queryForList(sql);

            map.put("nongcun", list);
            return  map;
    }
根据点位范围内分组,获取前五条数据
SELECT    name,  ST_AsText(geom) as geom  FROM   "geo_sfz_point"
    where  1=1  ORDER BY  geom <-> GeomFromEWKT('SRID=4326;POINT(121.50 31.22)') limit 5;
akglobe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
最优控制第六章习题答案
05-17
最优控制第六章习题答案 本文档提供了最优控制第六章习题答案的详细解析，涵盖了多个方面的知识点，包括决策变量、最优控制序列、动态规划、哈密顿函数、哈密顿-雅可比方程等。 决策变量是最优控制问题的核心概念...
单片机电子教案第6章.ppt
11-12
【单片机电子教案第6章】主要讲解了计算机串行通信的基础知识，包括串行通信的基本概念、异步通信与同步通信的区别以及传输方向的分类。以下是对这些知识点的详细阐述： 1. 计算机串行通信基础：串行通信在多微机...
第六章CAD操作PPT优秀资料.ppt
11-19
【第六章CAD操作】在计算机辅助设计（CAD）中，第六章主要讲解了关于图形编辑的重要技巧，包括删除、选择、复制、旋转、移动、偏移复制以及改变图形所在图层的方法。这些技能对于高效地进行CAD绘图至关重要。 1. **...
第六章-数字数据通信技术.ppt
11-28
《第六章-数字数据通信技术》 数字数据通信技术是计算机通信领域的重要组成部分，它涉及如何高效、准确地传输和接收二进制数据。本章主要讨论了两种基本的传输方式——异步传输和同步传输，以及它们各自的特点和...
第六章距离测量PPT课件.pptx
10-09
《第六章 距离测量》 距离测量是测绘学中的基础技能，广泛应用于建筑、工程、地理信息系统等领域。本章主要介绍使用钢尺进行距离测量的方法和注意事项，以及相关的精度评估。 一、量距工具 在距离测量中，钢尺是最...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 579
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1046
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 268
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 601
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 172
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 442
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 564
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 680
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
vue-lic
最新发布
qq_64669006的博客
08-14 137
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
智启万象 | Web 开发智能升级、简单易用
谷歌开发者
08-10 970
AI 的融入使 Web 的功能更加强大同时也更加简单易用一起回顾 2024 Google 开发者大会了解 Web 开发 UI 功能和 OS 集成的最新创新以及如何通过这些创新来打造卓越的应用体验Web 不断的革新与发展，不仅为全球数十亿用户提供了丰富多样的在线体验，也为开发者提供了实现创意和构建未来的可能。谷歌提供工具和解决方案，帮助 Web 开发者基于实际数据做出明智的技术选型和开发决策。Bas...
Web语义化及实际应用
沐爸的博客
08-13 935
Web语义化是什么？有什么作用？实际开发中如何运用呢？一起了解下吧！
前端实现接口调用进度百分比
qq_42072014的博客
08-14 111
通过本文，我们学习了如何使用 XMLHttpRequest 和 Fetch API 在前端实现接口调用进度百分比的显示。这些技术可以帮助提升用户体验，特别是在涉及文件上传或大型数据传输的场景中。如果你在实现过程中遇到任何问题，欢迎随时提问。
uniapp 中 web-view 向 App 传递消息
Cang_Ye的博客
08-14 155
在web项目中引入官方库 uni.webview.1.5.4.js ，
前端开发TS ts
qq_41910413的博客
08-13 131
ts基础
"第六章CAD操作PPT优秀资料及连杆投影图教学要求
本章主要介绍了CAD操作中常用的一些方法和技巧，包括图形的编辑、选择、复制、旋转、移动、偏移、改变实体所在图层的方式等。具体内容如下： 首先，要掌握图形的编辑方法，即删除图形的命令。可以通过下拉菜单中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

akglobe

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

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

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

打赏作者

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

抵扣说明：

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

余额充值