作者：nannan
目录
前言
在现代地理信息系统中，电子围栏（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
})
},
});
});
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
