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

攻城师不浪
552 阅读3分钟

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2025年输出的第2/100篇文章。

前言

今天给大家带来的是在Cesium中实现电子围栏的特效，开源地址在文末领取。

应用场景

1. 安全防护

例如，在监狱、军事基地等重要场所，电子围栏可以有效地防止非法入侵。通过在围栏上设置电流或感应装置，当有人试图翻越时，系统会立即发出警报。

2. 野生动物保护

例如，在一些自然保护区，通过设置电子围栏，可以有效地防止野生动物进入人类居住区，避免野生动物与人类发生冲突，同时也保护了野生动物的栖息环境.

3. 地理信息系统

在地理信息系统中，电子围栏可以用于划定特定的区域范围，进行地理信息的管理和分析。例如，在城市规划中，可以通过设置电子围栏来划分不同的功能区域，进行土地利用规划和资源管理。

OK，下面我们来看下电子围栏的代码实现。

原理

通过 Cesium 的 Wall(墙体)实体结合自定义材质来实现：

  1. 墙体构建

  2. 动态材质定义

  3. 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 着色器语言实现：

  • vertical 模式：实现垂直方向的流动效果；

  • 标准模式：实现水平方向的流动效果

主要特点

动态效果：

  • 通过时间变量控制纹理坐标的偏移

  • 支持垂直和水平两种动画方向

  • 可自定义动画速度和循环时间

视觉效果：

  • 支持自定义颜色

  • 可添加纹理图片

  • 具有发光效果

可配置性：

  • 围栏高度可调

  • 动画参数可配置

  • 材质属性可自定义

最后

【源码地址】：github.com/jiawanlong/…

【不浪的cesium开源地址】：github.com/tingyuxuan2…

如果开源对您有帮助，希望可以给一个star，鼓励我们开源更多！

不会Cesium的基础，也很难做出更高级的效果，所以可以了解下不浪的教程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，并最终完成一个智慧城市的完整项目，课程也在不断更新迭代中，想了解+作者：brown_7778（备注来意）。

有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意）。

avatar
文章
阅读
粉丝