开源！Cesium中绘制动态电子围栏

创作时间:

作者:

@小白创作中心

开源！Cesium中绘制动态电子围栏

引用

CSDN

https://m.blog.csdn.net/weixin_40580834/article/details/145009655

在Cesium中实现动态电子围栏特效，可以应用于安全防护、野生动物保护和地理信息系统等多个场景。本文将详细介绍其实现原理和具体代码示例。

应用场景

电子围栏技术在多个领域都有广泛的应用：

安全防护：在监狱、军事基地等重要场所，电子围栏可以有效地防止非法入侵。通过在围栏上设置电流或感应装置，当有人试图翻越时，系统会立即发出警报。
野生动物保护：在一些自然保护区，通过设置电子围栏，可以有效地防止野生动物进入人类居住区，避免野生动物与人类发生冲突，同时也保护了野生动物的栖息环境。
地理信息系统：在地理信息系统中，电子围栏可以用于划定特定的区域范围，进行地理信息的管理和分析。例如，在城市规划中，可以通过设置电子围栏来划分不同的功能区域，进行土地利用规划和资源管理。

实现原理

通过Cesium的Wall（墙体）实体结合自定义材质来实现电子围栏特效：

墙体构建
动态材质定义
Shader着色器实现

墙体数据结构

function loadWall() {
    // ... 围栏坐标数据 ...
    datasouce.entities.add({
        wall: {
            positions: Cesium.Cartesian3.fromDegreesArray(coor), // 墙体位置
            maximumHeights: new Array(data.length).fill(500),    // 墙体最大高度
            minimunHeights: new Array(data.length).fill(0),      // 墙体最小高度
            material: new Cesium.DynamicWallMaterialProperty({   // 动态材质
                trailImage: "./wall.png", 
                color: Cesium.Color.CYAN, 
                duration: 1500 
            })
        }
    });
}

以上代码定义了围栏的基本形状，通过经纬度数组创建墙体，设置高度范围。

动态材质属性类

function DynamicWallMaterialProperty(options) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = options.color || Color.BLUE;
    this.duration = options.duration || 1000;     // 动画持续时间
    this.trailImage = options.trailImage;         // 围栏纹理图片
    this._time = (new Date()).getTime();
}

该类定义了围栏材质的基本属性，包括颜色、动画持续时间和纹理图片。

着色器实现

function _getDirectionWallShader(options) {
    // ... 
    if (options.freely == "vertical") { //（由下到上）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
    } else { //（逆时针）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
    }
    // ...
}

这部分是实现动态效果的关键，通过GLSL着色器语言实现：