SuperMap iClient3D for WebGL之电子围栏特效

nannan^_^

已于 2024-04-25 15:17:33 修改

阅读量1k

点赞数 22

文章标签： 3d webgl

于 2024-04-25 14:13:58 首次发布

本文链接：https://blog.csdn.net/nan620403/article/details/138163869

版权

前言

在现代地理信息系统中，电子围栏（Geofencing）技术已经成为了一种常见的功能，用于监控和管理特定区域的活动。电子围栏技术被广泛应用于物流管理、安防监控、智慧城市等领域。在本文中，我们将探讨如何利用SuperMap iClient3D for WebGL实现不同类型的电子围栏特效。

首先来看整体效果：

其次我们分别对每个电子围栏特效效果及实现方法做详细描述。

一、动态上升

1.1 实现效果

1.2 实现方法

1.2.1 材质

1.2.2 代码

以下这段代码通过viewer.entities.add方法向三维场景中添加一个墙体实体。墙体的位置信息、最小高度信息和最大高度信息都被设置，其中最大高度信息通过回调函数CallbackProperty动态计算和更新。墙体的材质属性被设置为图片材质，使用了指定路径的图片，并设置了透明度。

var handlerLine = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Line);
				//绘制线的监听事件
				handlerLine.drawEvt.addEventListener(function(result) {
					handlerLine.polyline.show = false; //隐藏之前绘制的线
					var Line = result.object; //获取当前绘制线的对象
					var positions = Line.positions; //获取当前绘制线的节点坐标
					console.log("positions", positions)
					var flatPoints = [];
					//循环遍历线节点，将经纬度、高度传给flatPoints数组
					for(var i = 0, j = positions.length; i < j; i++) {
						var position = positions[i];
						var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
						var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
						var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
						var height = cartographic.height;
						flatPoints.push(lon, lat, height);
					}
					//为了使绘制的线自动闭合，在最后将起点经纬度高度值传给flatPoints为终点
					for(var i = 0; i < 3; i++) {
						flatPoints.push(flatPoints[i]);
					}
					console.log("动态立体墙：", flatPoints);
					var minHeights = [];
					var maxHeights = [];
					var minH2 = [];
					var minH3 = [];
					var isShan = true;

					for(var i = 0; i < flatPoints.length / 3; i++) {
						// // 将每个点的高度取整后加入minHeights数组中
						minHeights.push(Math.floor(flatPoints[i * 3 + 2]));
						 检查当前高度与前一个高度是否相同，如果不同则将当前高度赋值为前一个高度，否则保持不变
						if(minH2[i - 1] && Math.floor(flatPoints[i * 3 + 2]) !== minH2[i - 1]) {
							minH2[i] = minH2[i - 1];
						} else {
							minH2[i] = Math.floor(flatPoints[i * 3 + 2])
						}
						// 如果当前高度小于0，则将当前高度设置为0
						if(minH2[i] < 0) {
							minH2[i] = 0
						}
					}
					for(var i = 0; i < flatPoints.length / 3; i++) {
						// 将每个点的高度加上80后加入maxHeights数组中
						maxHeights.push(flatPoints[i * 3 + 2] + 80)
					}
					console.log("最小高度：", minHeights);
					viewer.entities.add({
						wall: {
							positions: new SuperMap3D.Cartesian3.fromDegreesArrayHeights(flatPoints),
							minimumHeights: minHeights,
							maximumHeights: new SuperMap3D.CallbackProperty(function() {

								for(var i = 0; i < minH2.length; i++) {
									minH2[i] += 3; // // 将每个最小高度值增加3
									if(minH2[i] >= Math.max.apply(null, maxHeights)) { // 如果当前最小高度值大于等于所有最大高度值中的最大值

										if(Math.min.apply(null, minHeights) < 0) {
											minH2[i] = 0 + 3; // 如果所有最小高度值中的最小值小于0，则将当前最小高度值设置为0加3
										} else {
											minH2[i] = Math.min.apply(null, minHeights) + 3;
											// 否则将当前最小高度值设置为所有最小高度值中的最小值加3
										}
									}
								}
								return minH2;
							}, false),

							material: new SuperMap3D.ImageMaterialProperty({
								image: "./images/蓝1.png",
								transparent: true,
							})
						}
					})

					console.log("最大高度：", minH2);
				});

二、静态纹理

2.1 实现效果

2.2 实现方法

2.2.1 材质

2.2.2 代码

以下这段代码通过viewer.entities.add方法向3D场景中添加另一个墙体实体。墙体的位置信息、最小高度信息和最大高度信息都被设置，最小高度信息和最大高度信息是固定的，这里是静态，与动态不同。同时设置了墙体的轮廓线为可见，并指定了轮廓线的颜色和宽度。墙体的材质属性被设置为图片材质，并指定了图片路径、透明度以及颜色为半透明的红色。

var handlerLine1 = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Line);

				handlerLine1.drawEvt.addEventListener(function(result) {
					handlerLine1.polyline.show = false;
					var Line = result.object;
					var positions = Line.positions;
					console.log("positions", positions)
					var flatPoints1 = [];
					let maxH = [];
					let minH = [];
					for(var i = 0, j = positions.length; i < j; i++) {
						var position = positions[i];
						var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
						var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
						var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
						var height = Math.floor(cartographic.height);
						flatPoints1.push(lon, lat, height + 100);
						minH.push(0);
						maxH.push(180);
					}

					for(var i = 0; i < 3; i++) {
						flatPoints1.push(flatPoints1[i]);

					}

					console.log(maxH);
					console.log(minH);
					minH.push(minH[0]);
					maxH.push(maxH[0]);
					viewer.entities.add({
						wall: {
							positions: new SuperMap3D.Cartesian3.fromDegreesArrayHeights(flatPoints1),
							minimumHeights: minH,
							maximumHeights: maxH,
							outline: true,
							outlineColor: SuperMap3D.Color.RED,
							outlineWidth: 3,
							material: new SuperMap3D.ImageMaterialProperty({
								image: "./images/渐变.png",
								transparent: true,
								color: SuperMap3D.Color.RED.withAlpha(0.5)
							})

						}
					})
				});

三、渐变纹理

3.1 实现效果

3.2 实现方法

3.2.1 材质

3.2.2 代码

该渐变纹理与静态纹理是一样的，只不过是材质有区别，材质为纯色渐变。代码具体如下：

var handlerLineg = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Line);

				handlerLineg.drawEvt.addEventListener(function(result) {
					handlerLineg.polyline.show = false;
					var Line = result.object;
					var positions = Line.positions;
					console.log("positions", positions)
					var flatPoints1 = [];
					let maxH = [];
					let minH = [];
					for(var i = 0, j = positions.length; i < j; i++) {
						var position = positions[i];
						var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
						var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
						var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
						var height = Math.floor(cartographic.height);
						flatPoints1.push(lon, lat, height + 100);
						minH.push(0);
						maxH.push(180);
					}

					for(var i = 0; i < 3; i++) {
						flatPoints1.push(flatPoints1[i]);

					}

					console.log(maxH);
					console.log(minH);
					minH.push(minH[0]);
					maxH.push(maxH[0]);
					viewer.entities.add({
						wall: {
							positions: new SuperMap3D.Cartesian3.fromDegreesArrayHeights(flatPoints1),
							minimumHeights: minH,
							maximumHeights: maxH,
							material: new SuperMap3D.ImageMaterialProperty({
								image: "./images/黄1.png",
								transparent: true,
								color: SuperMap3D.Color.YELLOW
							})

						}
					})
				});

四、循环运动

4.1 实现效果

4.2 实现方法

4.2.1 材质

4.2.2 代码

循环运动的电子围栏主要用到的接口为SuperMap3D.DynamicWallMaterialProperty，该接口为SuperMap iClient3D 11i(2024) for WebGL新增接口，大家可以在2024年SuperMap的beta版本发布后，在官方网站获取下载体验。

注意，在使用该接口前需要调用：

<!--循环运动-->
		<script type="text/javascript" src="./js/MaterialProperty/DynamicWallMaterialProperty_vertical.js"></script>

var handlerLinex = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Line);

				handlerLinex.drawEvt.addEventListener(function(result) {
					handlerLinex.polyline.show = false;
					var Line = result.object;
					var positions = Line.positions;
					console.log("positions", positions)
					var flatPoints1 = [];
					let maxH = [];
					let minH = [];
					for(var i = 0, j = positions.length; i < j; i++) {
						var position = positions[i];
						var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
						var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
						var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);

						flatPoints1.push(lon, lat);
						minH.push(0);
						maxH.push(60);
					}

					for(var i = 0; i < 2; i++) {
						flatPoints1.push(flatPoints1[i]);

					}

					console.log(maxH);
					console.log(minH);
					minH.push(minH[0]);
					maxH.push(maxH[0]);
					console.log("测试", flatPoints1);
					viewer.entities.add({
						wall: {
							positions: SuperMap3D.Cartesian3.fromDegreesArray(flatPoints1),
							maximumHeights: maxH,
							minimumHeights: minH,
							material: new SuperMap3D.DynamicWallMaterialProperty({
								trailImage: './images/ElectronicWall/wall.png',
								color: SuperMap3D.Color.CYAN,
								duration: 1500
							})

						},
					});
				});

五、箭头运动

5.1 实现效果

5.2 实现方法

5.2.1 材质

5.2.2 代码

箭头运动的电子围栏主要用到的接口为SuperMap3D.ArrawWallMaterialProperty，该接口为SuperMap iClient3D 11i(2024) for WebGL新增接口，大家可以在2024年SuperMap的beta版本发布后，在官方网站获取下载体验。

注意，在使用该接口前需要调用：

<!--箭头运动-->
		<script type="text/javascript" src="./js/MaterialProperty/DynamicWallMaterialProperty_standard.js"></script>

var handlerLinef = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Line);

				handlerLinef.drawEvt.addEventListener(function(result) {
					handlerLinef.polyline.show = false;
					var Line = result.object;
					var positions = Line.positions;
					console.log("positions", positions)
					var flatPoints1 = [];
					let maxH = [];
					let minH = [];
					for(var i = 0, j = positions.length; i < j; i++) {
						var position = positions[i];
						var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
						var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
						var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);

						flatPoints1.push(lon, lat);
						minH.push(0);
						maxH.push(60);
					}

					for(var i = 0; i < 2; i++) {
						flatPoints1.push(flatPoints1[i]);

					}

					console.log(maxH);
					console.log(minH);
					minH.push(minH[0]);
					maxH.push(maxH[0]);
					console.log("测试", flatPoints1);
					viewer.entities.add({
						wall: {
							positions: SuperMap3D.Cartesian3.fromDegreesArray(flatPoints1),
							maximumHeights: maxH,
							minimumHeights: minH,
							material: new SuperMap3D.ArrawWallMaterialProperty({
								trailImage: './images/ElectronicWall/arrow.png',
								color: SuperMap3D.Color.YELLOW,
								duration: 1500
							})

						},
					});
				});

nannan^_^

关注

22
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
SuperMap iClient3D for WebGL之电子围栏特效

在现代地理信息系统中，电子围栏（Geofencing）技术已经成为了一种常见的功能，用于监控和管理特定区域的活动。电子围栏技术被广泛应用于物流管理、安防监控、智慧城市等领域。在本文中，我们将探讨如何利用SuperMap iClient3D for WebGL实现不同类型的电子围栏特效。首先来看整体效果：其次我们分别对每个电子围栏特效效果及实现方法做详细描述。
复制链接

扫一扫