chbim-time-axis-v2 0.0.17 → 0.0.19

package/README.md

@@ -216,6 +216,66 @@ interface InstantTask extends GanttTask {
 }
 ```
 
+## 🎥 ViewportRoam (视角漫游)
+
+组件包内置了一个 `ViewportRoam` 工具类，用于在 Cesium 中实现平滑的视角漫游，支持位置、偏航角(heading)、俯仰角(pitch)和翻滚角(roll)的插值动画。
+
+### 1. 导入与定义
+
+```typescript
+import { ViewportRoam, type RoamPoint } from "chbim-time-axis-v2";
+
+// 漫游点数据结构
+interface RoamPoint {
+  id: number | string;
+  time: string; // ISO8601 时间字符串
+  lng: number; // 经度
+  lat: number; // 纬度
+  alt: number; // 高度
+  heading: number; // 偏航角 (度)
+  pitch: number; // 俯仰角 (度)
+  roll?: number; // 翻滚角 (度)，可选
+}
+```
+
+### 2. 使用示例
+
+```typescript
+// 1. 准备漫游数据
+const roamData: RoamPoint[] = [
+  {
+    id: 1,
+    time: "2023-01-01T10:00:00Z",
+    lng: 120.123,
+    lat: 30.456,
+    alt: 100,
+    heading: 0,
+    pitch: -45,
+  },
+  {
+    id: 2,
+    time: "2023-01-01T10:01:00Z",
+    lng: 120.124,
+    lat: 30.457,
+    alt: 120,
+    heading: 90,
+    pitch: -30,
+  },
+];
+
+// 2. 初始化漫游控制器
+const roamController = new ViewportRoam(viewer, roamData);
+
+// 3. 开始漫游 (将自动监听时钟 tick 事件并更新相机)
+roamController.start();
+
+// 4. 停止漫游
+// roamController.stop();
+
+// 5. 销毁 (组件卸载时调用)
+// roamController.destroy();
+```
+
 ## ⚙️ 组件 API
 
 ### Props (属性)

package/dist/chbim-time-axis-v2.es.js

@@ -5,6 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { watch, toValue as toValue$1, computed, unref, reactive, shallowRef, ref, getCurrentScope, onScopeDispose, shallowReadonly, defineComponent, mergeDefaults, useSlots, useTemplateRef, openBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, provide, readonly, toRef, onMounted, nextTick, onUnmounted, createElementBlock, normalizeClass, createVNode, Teleport, createElementVNode, normalizeStyle, Transition, createCommentVNode, inject, withModifiers, Fragment, toDisplayString, resolveDynamicComponent, h, mergeProps, createTextVNode, onBeforeUpdate, withDirectives, vShow, withKeys, createStaticVNode } from "vue";
+import * as Cesium from "cesium";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -13137,10 +13138,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (clock) {
           isPlaying.value = clock.shouldAnimate;
           const onTick = () => {
-            const Cesium = window.Cesium;
-            if (!Cesium)
+            const Cesium2 = window.Cesium;
+            if (!Cesium2)
               return;
-            const now = Cesium.JulianDate.toDate(clock.currentTime);
+            const now = Cesium2.JulianDate.toDate(clock.currentTime);
             currentTime.value = dayjs(now).toISOString();
             if (isPlaying.value !== clock.shouldAnimate) {
               isPlaying.value = clock.shouldAnimate;
@@ -13405,9 +13406,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleTimeUpdate = (newTime) => {
       currentTime.value = newTime;
       const clock = targetClock.value;
-      const Cesium = window.Cesium;
-      if (clock && Cesium) {
-        clock.currentTime = Cesium.JulianDate.fromIso8601(newTime);
+      const Cesium2 = window.Cesium;
+      if (clock && Cesium2) {
+        clock.currentTime = Cesium2.JulianDate.fromIso8601(newTime);
       }
     };
     const toggleMaximize = () => {
@@ -13635,10 +13636,109 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const CesiumGantt_vue_vue_type_style_index_0_scoped_bc47a9ac_lang = "";
 const CesiumGantt = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc47a9ac"]]);
+class ViewportRoam {
+  constructor(viewer, data) {
+    __publicField(this, "viewer");
+    __publicField(this, "positionProperty");
+    __publicField(this, "headingProperty");
+    __publicField(this, "pitchProperty");
+    __publicField(this, "rollProperty");
+    __publicField(this, "_onTick");
+    __publicField(this, "_isPlaying", false);
+    this.viewer = viewer;
+    this.positionProperty = new Cesium.SampledPositionProperty();
+    this.headingProperty = new Cesium.SampledProperty(Number);
+    this.pitchProperty = new Cesium.SampledProperty(Number);
+    this.rollProperty = new Cesium.SampledProperty(Number);
+    this.positionProperty.setInterpolationOptions({
+      interpolationDegree: 1,
+      interpolationAlgorithm: Cesium.LinearApproximation
+    });
+    this.headingProperty.setInterpolationOptions({
+      interpolationDegree: 1,
+      interpolationAlgorithm: Cesium.LinearApproximation
+    });
+    this.pitchProperty.setInterpolationOptions({
+      interpolationDegree: 1,
+      interpolationAlgorithm: Cesium.LinearApproximation
+    });
+    this.rollProperty.setInterpolationOptions({
+      interpolationDegree: 1,
+      interpolationAlgorithm: Cesium.LinearApproximation
+    });
+    this.initData(data);
+    this._onTick = (clock) => {
+      const time = clock.currentTime;
+      this.updateCamera(time);
+    };
+  }
+  initData(data) {
+    const sortedData = [...data].sort(
+      (a, b) => dayjs(a.time).valueOf() - dayjs(b.time).valueOf()
+    );
+    sortedData.forEach((item) => {
+      const time = Cesium.JulianDate.fromIso8601(item.time);
+      const position = Cesium.Cartesian3.fromDegrees(
+        item.lng,
+        item.lat,
+        item.alt
+      );
+      this.positionProperty.addSample(time, position);
+      this.headingProperty.addSample(time, Cesium.Math.toRadians(item.heading));
+      this.pitchProperty.addSample(time, Cesium.Math.toRadians(item.pitch));
+      this.rollProperty.addSample(time, Cesium.Math.toRadians(item.roll || 0));
+    });
+  }
+  /**
+   * 开始跟随时间轴播放漫游
+   */
+  start() {
+    if (this._isPlaying)
+      return;
+    this.viewer.clock.onTick.addEventListener(this._onTick);
+    this._isPlaying = true;
+  }
+  /**
+   * 停止漫游
+   */
+  stop() {
+    if (!this._isPlaying)
+      return;
+    this.viewer.clock.onTick.removeEventListener(this._onTick);
+    this._isPlaying = false;
+  }
+  /**
+   * 根据当前时间更新相机
+   * @param time
+   */
+  updateCamera(time) {
+    const position = this.positionProperty.getValue(time);
+    const heading = this.headingProperty.getValue(time);
+    const pitch = this.pitchProperty.getValue(time);
+    const roll = this.rollProperty.getValue(time);
+    if (position && heading !== void 0 && pitch !== void 0) {
+      this.viewer.camera.setView({
+        destination: position,
+        orientation: {
+          heading,
+          pitch,
+          roll: roll || 0
+        }
+      });
+    }
+  }
+  /**
+   * 销毁实例
+   */
+  destroy() {
+    this.stop();
+  }
+}
 CesiumGantt.install = (app) => {
   app.component("CesiumGantt", CesiumGantt);
 };
 export {
   CesiumGantt,
+  ViewportRoam,
   CesiumGantt as default
 };