Skip to content

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 | 创建完成后自动定位到墙体范围 |

事件 ​

事件返回内容说明
loadPrimitive围墙创建并加入场景后触发
errorunknown坐标、高度或图元创建失败时触发

暴露方法 ​

当前组件没有对外暴露方法。

类型声明 ​

查看 CesiumDynamicWallOptions。

坐标、纹理和高度变化时会重建墙体;show 只更新显隐状态。

positions 真实支持三种格式:扁平经纬度数组、经纬度元组数组和 CesiumPosition[]。如果顶部或底部高度使用数组,数组长度必须与闭合后的墙体顶点数量一致。

depthTestAgainstTerrain 是 Viewer 级别设置。传入后组件会暂时修改地形深度检测,并在组件卸载时恢复原值;没有明确遮挡需求时可以不传。