效果预览

组件特点

  1. 支持本地czml数据,也支持czml数据的url路径
  2. 可以像播放视频一样播放czml动画,包含播放、暂停、停止、加速、减速、倒放等功能
  3. 可随意拖拽时针到任意位置，动画始终也会实时发变化
  4. 可跟踪任意czml对象，自由切换跟踪视角和自由视角
  5. 支持屏幕自适应，支持在移动端的展示

核心代码

<template>
  <div id="rootContainer" ref="rootContainer" class="root-container">
     <cp-czml-player :czml="url" :viewer="viewer" v-if="viewer"></cp-czml-player>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpCzmlPlayer } from 'cesium-pocket'
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { Viewer} from 'cesium';


let viewer: any = ref(null)
const rootContainer: any = ref({});
let url = 'https://raw.githubusercontent.com/CesiumGS/cesium/main/Apps/SampleData/simple.czml'


onMounted(() => {
  viewer.value = //你获取的viewer
});
.root-container {
  position: relative;
  width: 100%;
  height: 500px;
}


.map-plugin {
  position: absolute;
  bottom: 120px;
  right: 120px;
  z-index: 10;
}

组件参数列表

Component <cp-czml-player :czml="url" :viewer="viewer">
Props 组件属性 Props
序号 名称 类型 必须? 默认值 含义 备注
1 viewer Cesium.Viewer 是 - viewer对象 -
2 czml Array<any>|string 是 - czml数据或czml文件url地址 -