外观
3D · CesiumDynamicWall 动态墙
3D 文档 · CesiumDynamicWall 组件
CesiumDynamicWall 使用流动纹理 Primitive 表示业务边界、告警范围或重点区域。
vue
<CesiumDynamicWall
:positions="wallPositions"
:maximum-height="1500" :minimum-height="0"
color="rgba(238, 85, 34, 1)" :speed="2" :repeat="4"
fly-to-on-load
@load="onLoad" @error="onError"
/>ts
const wallPositions = [
{ longitude: 117.16, latitude: 39.10 },
{ longitude: 117.22, latitude: 39.10 },
{ longitude: 117.22, latitude: 39.06 },
{ longitude: 117.16, latitude: 39.06 },
];示例坐标是文档自建数据。flyToOnLoad 是组件自身已有的定位能力:墙体创建后根据 positions 计算包围球并调用 camera.flyToBoundingSphere,确保相机对准实际墙体范围。
| 名称 | 类型 | 默认值 | 说明 |
|---|
API
属性
| positions | CesiumDynamicWallOptions["positions"] | 必填 | 墙体顶点 | | maximumHeight | number \| number[] | 必填 | 顶部高度 | | minimumHeight | number \| number[] | 0 | 底部高度 | | color | CesiumColorInput | 橙红色 | 纹理叠加颜色 | | image | string \| HTMLCanvasElement | 内置流光 | 自定义纹理 | | speed / repeat | number | 3 / 4 | 动画速度和重复数 | | show | boolean | true | 显隐但不销毁 | | close | boolean | true | 首尾坐标不同时自动补上首点闭合 | | depthTestAgainstTerrain | boolean | undefined | 是否修改 Viewer 的地形深度检测 | | flyToOnLoad | boolean | false | 创建完成后自动定位到墙体范围 |
事件
| 事件 | 返回内容 | 说明 |
|---|---|---|
load | Primitive | 围墙创建并加入场景后触发 |
error | unknown | 坐标、高度或图元创建失败时触发 |
暴露方法
当前组件没有对外暴露方法。
类型声明
坐标、纹理和高度变化时会重建墙体;show 只更新显隐状态。
positions 真实支持三种格式:扁平经纬度数组、经纬度元组数组和 CesiumPosition[]。如果顶部或底部高度使用数组,数组长度必须与闭合后的墙体顶点数量一致。
depthTestAgainstTerrain 是 Viewer 级别设置。传入后组件会暂时修改地形深度检测,并在组件卸载时恢复原值;没有明确遮挡需求时可以不传。