VideoWall 视频墙

在地图上绘制多边形区域，把视频画面实时贴到该区域表面，模拟大屏视频墙 / 视频融合展示。本案例是 VideoMaterialProperty 与 DrawManager 的组合演示：视频材质负责画面贴面，绘图管理器负责区域绘制，两者均为既有 SDK 能力。

能力定位

视频墙适合：

监控视频融合：把实时流贴到地表多边形，模拟大屏视频融合；
园区/路口视频标定：绘制视频覆盖区域，直观表达监控画面实际覆盖范围；
动态纹理面：用 canvas 流（captureStream）、摄像头或视频文件作为区域表面。

本案例的演示视频由本地 Canvas captureStream(24) 实时生成（雷达扫描 / 热力数据 / 网格脉冲三种样式），全程不请求外部视频服务，离线可复现。生产环境只需把视频元素替换为真实监控流（见下方「使用真实视频源」）。

核心组合

import { DrawManager } from '@nexa/gis-cesium'
import { VideoMaterialProperty } from '@nexa/gis-cesium'

// 1. 准备视频元素（此处为离线演示流，生产可换成 /static/videos/camera.mp4）
const video = document.createElement('video')
video.srcObject = canvas.captureStream(24)
video.muted = true
video.autoplay = true
video.play()

// 2. 绘制区域后，把视频贴到多边形表面
const entity = viewer.entities.add({
  polygon: {
    hierarchy: positions,
    material: new VideoMaterialProperty({ videoElement: video }),
    outline: true,
    outlineColor: Cesium.Color.fromCssColorString('#4ce0ff'),
    height: 0,
  },
})

使用真实视频源

VideoMaterialProperty 支持直接传入视频地址（videoUrl）或复用已创建的视频元素（videoElement），两者二选一：

const material = new VideoMaterialProperty({ videoUrl: '/static/videos/camera.mp4' })

// 视频元素复用场景（RTMP/WebRTC 转出的 HTMLVideoElement）
const material = new VideoMaterialProperty({ videoElement: htmlVideoElement })

贴面旋转不放在材质内：stRotation 是 polygon graphics 属性，由调用方设置：

entity.polygon.stRotation = new Cesium.CallbackProperty(
  () => Cesium.Math.toRadians(angle),
  false,
)

生命周期

视频墙的资源所有权遵循「谁创建谁清理」：

多边形实体由示例创建，清除时从 viewer.entities 移除；
canvas.captureStream 的轨道在卸载时 stop()，requestAnimationFrame 循环取消；
DrawManager 在卸载时 destroy()，并先 offDrawComplete() 解绑回调；
上述清理接入 nexaGis.extend(() => () => cleanup()) 统一销毁链，示例外壳卸载时兜底。

验证命令

bash

pnpm --filter @nexa/gis-cesium run typecheck
pnpm --filter @nexa/gis-cesium run test
pnpm --filter @nexa/gis-cesium run build:lib
pnpm --filter @nexa/gis-cesium run check:governance
pnpm lint

VideoWall 视频墙 ​

能力定位 ​

核心组合 ​

使用真实视频源 ​

生命周期 ​