Vue3+Cesium教程–视频纹理源码免费分享(第75篇)

import * as Cesium from 'cesium'export type VideoTextureRectangle = {  west: number  south: number  east: number  north: number}export interface VideoTextureCreateOptions {  videoUrl?: string  rectangle?: VideoTextureRectangle  height?: number  heightReference?: Cesium.HeightReference  classificationType?: Cesium.ClassificationType  granularity?: number  loop?: boolean  muted?: boolean  syncWithClock?: boolean}const DEFAULT_RECT: VideoTextureRectangle = {  west: 116.38,  south: 39.9,  east: 116.42,  north: 39.925,}export const DEFAULT_SAMPLE_VIDEO_URL = '/testdata/video/video.mp4'export default class VideoTexture {  private readonly viewer: Cesium.Viewer  private readonly video: HTMLVideoElement  private readonly bounds: Cesium.Rectangle  private entity: Cesium.Entity | undefined  private synchronizer: Cesium.VideoSynchronizer | undefined  constructor(viewer: Cesium.Viewer, options: VideoTextureCreateOptions = {}) {    this.viewer = viewer    const rect = options.rectangle ?? DEFAULT_RECT    this.bounds = Cesium.Rectangle.fromDegrees(      rect.west,      rect.south,      rect.east,      rect.north,    )    const heightReference =      options.heightReference ?? Cesium.HeightReference.CLAMP_TO_GROUND    let rectangleHeight: number | undefined    if (heightReference === Cesium.HeightReference.CLAMP_TO_GROUND) {      rectangleHeight = undefined    } else if (heightReference === Cesium.HeightReference.RELATIVE_TO_GROUND) {      rectangleHeight = options.height ?? 12    } else {      rectangleHeight = options.height ?? 0    }    const classificationType =      options.classificationType ?? Cesium.ClassificationType.TERRAIN    const granularity = options.granularity     const loop = options.loop ?? true    const muted = options.muted ?? true    const url = options.videoUrl ?? DEFAULT_SAMPLE_VIDEO_URL    this.video = document.createElement('video')    this.video.style.display = 'none'    this.video.setAttribute('playsinline', '')    this.video.playsInline = true    this.video.crossOrigin = 'anonymous'    this.video.loop = loop    this.video.muted = muted    this.video.preload = 'auto'    this.video.src = url    document.body.appendChild(this.video)    if (options.syncWithClock) {      this.synchronizer = new Cesium.VideoSynchronizer({        clock: viewer.clock,        element: this.video,      })    }    const rectangleGraphics: Cesium.RectangleGraphics.ConstructorOptions = {      coordinates: this.bounds,      heightReference,      classificationType,      granularity,      material: new Cesium.ImageMaterialProperty({        image: this.video,      }),    }    if (rectangleHeight !== undefined) {      rectangleGraphics.height = rectangleHeight    }    this.entity = viewer.entities.add({      rectangle: rectangleGraphics,    })    void this.video.play().catch(() => {})  }  getVideoElement(): HTMLVideoElement {    return this.video  }  getEntity(): Cesium.Entity | undefined {    return this.entity  }  async play(): Promise<void> {    await this.video.play()  }  pause(): void {    this.video.pause()  }  setMuted(muted: boolean): void {    this.video.muted = muted  }  setLoop(loop: boolean): void {    this.video.loop = loop  }  setShow(show: boolean): void {    if (this.entity) this.entity.show = show  }  flyTo(duration = 2.0): void {    this.viewer.camera.flyTo({      destination: this.bounds,      duration,    })  }  /** 更换视频源（会重新 load，创建后调用） */  async setSource(url: string): Promise<void> {    this.pause()    this.video.src = url    this.video.load()    await this.video.play().catch(() => {})  }  destroy(): void {    this.pause()    if (this.synchronizer && !this.synchronizer.isDestroyed()) {      this.synchronizer.destroy()      this.synchronizer = undefined    }    if (this.entity) {      this.viewer.entities.remove(this.entity)      this.entity = undefined    }    this.video.removeAttribute('src')    this.video.load()    this.video.remove()  }}