cc-tools-utils 0.0.1 → 0.0.4

package/lib/js/cesiumHooks.js

@@ -0,0 +1,1127 @@
+import {
+  SingleTileImageryProvider,
+  Rotation,
+  JulianDate,
+  Math as CesiumMath,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  Transforms,
+  Matrix4,
+  Cartesian3,
+  HeadingPitchRoll,
+  SampledProperty,
+  Ellipsoid,
+  Cartesian2,
+  HorizontalOrigin,
+  VerticalOrigin,
+  HeightReference,
+  VelocityOrientationProperty,
+  CallbackProperty,
+  Color,
+} from "cesium";
+import * as Cesium from "cesium";
+
+// 默认镜头高度
+export const DEFAULT_HEIGHT = 25000000;
+// 默认坐标，显示中国
+export const DEFAULT_POSITION = [109, 35.5, DEFAULT_HEIGHT];
+// 模型显示的距离阈值（米）
+export const MODEL_DISPLAY_DISTANCE = 5000000;
+
+/**
+ * 设置Cesium Ion访问令牌
+ * @param {string} token - Cesium Ion访问令牌
+ */
+export const setCesiumAccessToken = (token) => {
+  if (!token || typeof token !== "string") {
+    console.warn("setCesiumAccessToken: token必须是非空字符串");
+    return;
+  }
+  Cesium.Ion.defaultAccessToken = token;
+};
+
+// 判断是否是同一个对象
+export function isArrayEqual(arr1, arr2) {
+  const sortedArr1 = arr1.slice().sort();
+  const sortedArr2 = arr2.slice().sort();
+  return (
+    sortedArr1.length === sortedArr2.length &&
+    sortedArr1.every((value, index) => value === sortedArr2[index])
+  );
+}
+
+// 获取航向角
+export const getHeading = (pointA, pointB) => {
+  const transform = Transforms.eastNorthUpToFixedFrame(pointA);
+  const positionVector = Cartesian3.subtract(pointB, pointA, new Cartesian3());
+  const vector = Matrix4.multiplyByPointAsVector(
+    Matrix4.inverse(transform, new Matrix4()),
+    positionVector,
+    new Cartesian3(),
+  );
+  const direction = Cartesian3.normalize(vector, new Cartesian3());
+  // heading
+  const heading = Math.atan2(direction.y, direction.x) - CesiumMath.PI_OVER_TWO;
+  return CesiumMath.TWO_PI - CesiumMath.zeroToTwoPi(heading);
+};
+
+/**
+ * 计算两点间的恒向线方位角（Rhumb Bearing）
+ * @param {Array} pos1 - 起点 [经度, 纬度]
+ * @param {Array} pos2 - 终点 [经度, 纬度]
+ * @returns {number} 方位角（度数）
+ */
+export const getRhumbBearing = (pos1, pos2) => {
+  if (!Array.isArray(pos1) || !Array.isArray(pos2)) {
+    throw new Error("getRhumbBearing: 参数必须是数组");
+  }
+  if (pos1.length < 2 || pos2.length < 2) {
+    throw new Error("getRhumbBearing: 参数数组至少需要两个元素[经度, 纬度]");
+  }
+
+  const [lon1, lat1] = pos1;
+  const [lon2, lat2] = pos2;
+
+  // 将度数转换为弧度
+  const φ1 = CesiumMath.toRadians(lat1);
+  const φ2 = CesiumMath.toRadians(lat2);
+  const Δλ = CesiumMath.toRadians(lon2 - lon1);
+
+  // 计算恒向线方位角
+  const Δψ = Math.log(
+    Math.tan(φ2 / 2 + Math.PI / 4) / Math.tan(φ1 / 2 + Math.PI / 4),
+  );
+  const θ = Math.atan2(Δλ, Δψ);
+
+  // 转换为度数并标准化到0-360范围
+  return (CesiumMath.toDegrees(θ) + 360) % 360;
+};
+
+// 获取俯仰角
+export const getPitch = (pointA, pointB) => {
+  const transform = Transforms.eastNorthUpToFixedFrame(pointA);
+  const vector = Cartesian3.subtract(pointB, pointA, new Cartesian3());
+  const direction = Matrix4.multiplyByPointAsVector(
+    Matrix4.inverse(transform, transform),
+    vector,
+    vector,
+  );
+  Cartesian3.normalize(direction, direction);
+  return CesiumMath.PI_OVER_TWO - CesiumMath.acosClamped(direction.z);
+};
+
+// 更新模型的位置
+export const updataModelPosition = (
+  viewer,
+  { model, targetPosition, totalDuration = 2 },
+) => {
+  // 在每帧更新时更新实体位置
+  viewer.clock.onTick.addEventListener(function (clock) {
+    const currentTime = clock.currentTime.secondsOfDay;
+
+    if (currentTime <= totalDuration) {
+      // 创建一个用于存储结果的 Cartesian3 对象
+      const currentPosition = new Cesium.Cartesian3();
+      // 计算当前位置
+      Cesium.Cartesian3.lerp(
+        model.position.getValue(clock.currentTime),
+        targetPosition,
+        currentTime / totalDuration,
+        currentPosition,
+      );
+
+      // 更新实体位置
+      model.position.setValue(currentPosition);
+    } else {
+      // 移动完成后可以进行其他操作或停止移动
+      // console.log("移动完成");
+    }
+  });
+};
+
+// 笛卡尔坐标转地理位置坐标
+export const transformCartesian3ToWGS84 = (cartesian3) => {
+  // 1. 使用 Cesium 提供的 Ellipsoid.WGS84 对象将笛卡尔坐标转换为地理坐标（经纬度高度）
+  let cartographic = Ellipsoid.WGS84.cartesianToCartographic(cartesian3);
+
+  // 2. 将经度（longitude）和纬度（latitude）从弧度转换为度数
+  let longitude = CesiumMath.toDegrees(cartographic.longitude);
+  let latitude = CesiumMath.toDegrees(cartographic.latitude);
+
+  // 3. 返回一个包含经度、纬度和高度的数组
+  return [longitude, latitude, cartographic.height];
+};
+
+// 颜色
+export const toCesiumColor = (color) => {
+  if (!color || typeof color !== "string") {
+    console.warn("toCesiumColor: color必须是字符串，使用默认颜色");
+    return Cesium.Color.WHITE;
+  }
+  try {
+    return Cesium.Color.fromCssColorString(color);
+  } catch (error) {
+    console.warn(`toCesiumColor: 无效的颜色值 ${color}，使用默认颜色`);
+    return Cesium.Color.WHITE;
+  }
+};
+
+// 位置
+export const toCesiumPosition = (position) => {
+  if (!Array.isArray(position)) {
+    throw new Error("toCesiumPosition: position必须是数组");
+  }
+  if (position.length < 2) {
+    throw new Error(
+      "toCesiumPosition: position数组至少需要两个元素[经度, 纬度]",
+    );
+  }
+  if (position.some((v) => typeof v !== "number" || isNaN(v))) {
+    throw new Error("toCesiumPosition: position数组元素必须是有效数字");
+  }
+  return Cesium.Cartesian3.fromDegrees(...position);
+};
+
+// 返回中国视角
+export const backToChina = (viewer, callback, time) => {
+  if (!viewer) {
+    throw new Error("backToChina: viewer参数是必需的");
+  }
+  viewer.camera.flyTo({
+    destination: toCesiumPosition(DEFAULT_POSITION),
+    duration: time || 1.5,
+    complete: () => {
+      callback && callback();
+    },
+  });
+};
+
+// 初始化 一切
+export const initCesium = (boxID, doSomething) => {
+  if (!boxID) {
+    throw new Error("initCesium: boxID参数是必需的");
+  }
+  // 1. 创建Viewer
+  const viewer = new Cesium.Viewer(boxID, {
+    contextOptions: {
+      webgl: { alpha: true, powerPreference: "high-performance" },
+    },
+    // MapTiler的标准瓦片URL格式
+    // imageryProvider: new Cesium.UrlTemplateImageryProvider({
+    //   url: 'https://api.maptiler.com/maps/topo-v4/{z}/{x}/{y}.png?key=dKYoUxF6uo5WfiCaaoUd',
+    //   minimumLevel: 0,
+    //   maximumLevel: 20,
+    //   tileWidth: 512, // MapTiler支持512px大瓦片
+    //   tileHeight: 512,
+    //   credit: '© MapTiler © OpenStreetMap contributors'
+    // }),
+    // 替换为高德地图 - 选择你喜欢的样式
+    // imageryProvider: new Cesium.UrlTemplateImageryProvider({
+    // 方案1：标准街道地图（推荐，最清晰）
+    // url: 'https://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
+    // 方案2：卫星影像（无标注）
+    // url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+    // 方案3：卫星+路网混合
+    // url: 'https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
+    // 方案4：精简版（速度快）
+    // url: 'https://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1',
+    // 必要参数
+    //   minimumLevel: 1,
+    //   maximumLevel: 19, // 高德支持到19级
+    //   tileWidth: 256,
+    //   tileHeight: 256,
+    //   credit: '高德地图',
+    //   enablePickFeatures: false // 禁用要素拾取，提高性能
+    // }),
+
+    infoBox: false, // 禁用信息框（默认右下角的详情弹窗）
+    timeline: false, // 禁用底部时间轴控件（用于时间动画）
+    geocoder: false, // 禁用地理编码器（搜索位置功能）
+    homeButton: false, // 禁用主页按钮（返回初始视图）
+    sceneModePicker: true, // 禁用场景模式切换器（2D/2.5D/3D切换按钮）
+    baseLayerPicker: false, // 禁用底图切换器（地图图层选择控件）
+    navigationHelpButton: false, // 禁用导航帮助按钮（操作说明）
+    animation: false, // 禁用动画控件（播放/暂停时间动画）
+    selectionIndicator: false, // 禁用选择指示器（选中实体时的绿色框）
+  });
+  if (doSomething) {
+    // 用setTimeout确保在下一个事件循环执行
+    setTimeout(() => {
+      console.log("执行回调函数");
+      doSomething(viewer);
+    }, 0);
+  }
+
+  // 3. 返回viewer
+  return { viewer };
+};
+
+// 初始化时间特征 时间加快5倍数
+const initTime = (viewer) => {
+  viewer.clock.multiplier = 1; // 时间倍数
+  viewer.clock.shouldAnimate = true; // 继续移动
+  if (viewer.animation) {
+    const minutes = 0 - new Date().getTimezoneOffset(); // 0 - (-480);
+    let animation = viewer.animation;
+    animation.viewModel.timeFormatter = function (date, viewModel) {
+      let dataZone8 = JulianDate.addMinutes(date, minutes, new JulianDate());
+      return JulianDate.toIso8601(dataZone8).slice(11, 19);
+    };
+    animation.viewModel.dateFormatter = function (date, viewModel) {
+      let dataZone8 = JulianDate.addMinutes(date, minutes, new JulianDate());
+      return JulianDate.toIso8601(dataZone8).slice(0, 10);
+    };
+  }
+};
+
+// 添加发散波
+export const divergingWaves = (
+  viewer,
+  {
+    defaultPosition = [120.38017292236532, 31.480874872499374],
+    r = 0,
+    r2 = 0,
+    step = 2000,
+    max = 80000,
+    speed = 1,
+    defaultColor = "#ff0000",
+    id = "",
+  } = {},
+) => {
+  if (!Cesium.defined(viewer)) {
+    throw new Error("divergingWaves: viewer参数是必需的");
+  }
+  if (!Array.isArray(defaultPosition) || defaultPosition.length < 2) {
+    throw new Error("divergingWaves: defaultPosition必须是有效的坐标数组");
+  }
+  const entity = viewer.entities.add({
+    id,
+    // position: new Cesium.CallbackProperty(() => {
+    //   return toCesiumPosition(defaultPosition);
+    // }, false), // 点的经纬度坐标
+    position: toCesiumPosition(defaultPosition), // 点的经纬度坐标
+    ellipse: {
+      semiMinorAxis: new CallbackProperty(() => {
+        return r < max ? (r += step * speed) : (r = 0);
+      }, false),
+      semiMajorAxis: new CallbackProperty(() => {
+        return r2 < max ? (r2 += step * speed) : (r2 = 0);
+      }, false),
+
+      height: 0,
+      // 设置透明度递减
+      material: toCesiumColor(defaultColor),
+      outline: false,
+    },
+  });
+
+  return entity;
+};
+
+// 添加赤道线
+export const addEquatorialLine = (viewer, color = "#DC143C") => {
+  // 赤道数组集
+  const equatorialLinePositions = [
+    [180.0, 0.0, 100000],
+    [60.0, 0.0, 100000],
+    [-60.0, 0.0, 100000],
+    [-180.0, 0.0, 100000],
+  ];
+  // 将二维数组扁平化为一维数组
+  const flatPositions = equatorialLinePositions.reduce(
+    (acc, val) => acc.concat(val),
+    [],
+  );
+  viewer.entities.add({
+    id: "赤道线",
+    polyline: {
+      positions: Cesium.Cartesian3.fromDegreesArrayHeights(flatPositions),
+      width: 5, // 线宽
+      material: toCesiumColor(color), // 线的颜色
+    },
+  });
+};
+
+// @TEST 空中飞机
+export const airRouteFn = (viewer) => {
+  const allHeight = 1000000; // 所有的高度
+  const clock = viewer.clock; // 时间信息
+  // 航线  信息
+  const airRoute = {
+    from: [102.5, 30.0, allHeight], // 起点经纬度及高度
+    to: [150.5, -33.0, allHeight], // 终点经纬度及高度
+    last: 15, // 飞行持续时间（分钟）
+    stopFlag: false, // 停止标志，可能用于控制飞行状态
+  };
+  //添加飞机和自身的sampler
+  const samplerTimeAndPosition = new SampledProperty(Cartesian3); // 采样器初始化 <时间 位置>
+  const samplerRotation = new SampledProperty(Rotation); // 采集容器 <旋转角度>
+  // 此刻时间
+  const startTime = clock.currentTime.clone();
+  // 结束时间
+  const endTime = JulianDate.addMinutes(
+    startTime,
+    airRoute.last,
+    new JulianDate(),
+  );
+  // 容器添加初始化的时间戳和经纬度
+  samplerTimeAndPosition.addSample(
+    clock.currentTime,
+    toCesiumPosition(airRoute.from),
+  );
+  // 生成了一个时间序列数组times，从startTime开始，每隔一分钟计算一个时间点，直到飞行结束的前一分钟
+  const times = Array.from({ length: airRoute.last - 1 }, (_, index) =>
+    JulianDate.addMinutes(startTime, index + 1, new JulianDate()),
+  );
+  // 步径
+  const xStep = (airRoute.to[0] - airRoute.from[0]) / airRoute.last;
+  const yStep = (airRoute.to[1] - airRoute.from[1]) / airRoute.last;
+  // 根据  步径切割 得到沿途位置
+  const positions = Array.from({ length: airRoute.last - 1 }, (_, index) =>
+    toCesiumPosition([
+      airRoute.from[0] + (index + 1) * xStep,
+      airRoute.from[1] + (index + 1) * yStep,
+      airRoute.from[2],
+    ]),
+  );
+
+  // 航线的 起始坐标
+  const airRouteLine = [
+    airRoute.from,
+    ...positions.map((item) => transformCartesian3ToWGS84(item)),
+    airRoute.to,
+  ];
+
+  // 添加  航班连线
+  viewer.entities.add({
+    id: "添加航班连线",
+    labelVisible: true,
+    polyline: {
+      positions: Cartesian3.fromDegreesArrayHeights(
+        airRouteLine.flat(Infinity),
+      ),
+      width: 2,
+      material: new Cesium.PolylineDashMaterialProperty({
+        color: toCesiumColor("#8A2BE2"),
+      }),
+      loop: true, // 闭合线条以创建完整轨道
+      // clampToGround: true, //是否贴地
+    },
+  });
+
+  samplerTimeAndPosition.addSamples(times, positions); // 全部点位时间
+  samplerTimeAndPosition.addSample(endTime, toCesiumPosition(airRoute.to)); // 结束时间 和 位置
+
+  // 处理返回 rotation的采集器信息
+  const createRotationSampler = () => {
+    // < rotation采集器 >位置
+    const SP_Time_Position = samplerTimeAndPosition; // sampler 它是涵盖了时间和位置信息的采集器
+    // 取出时间
+    const times = SP_Time_Position._times;
+    // 把对应时间 和位置 放置在采集器中
+    times.map((julianDate, index) => {
+      const pos1 = transformCartesian3ToWGS84(
+        SP_Time_Position.getValue(julianDate),
+      ).slice(0, 2);
+
+      const pos2 = times[index + 1]
+        ? transformCartesian3ToWGS84(
+            SP_Time_Position.getValue(times[index + 1]),
+          ).slice(0, 2)
+        : null;
+      //最后时刻没有值的情况下，保持上一个角度 将度数转换为弧度
+      const result = pos2
+        ? -CesiumMath.toRadians(getRhumbBearing(pos1, pos2))
+        : samplerRotation.getValue(times[index - 1]);
+
+      // 添加 <time> <postion>
+      samplerRotation.addSample(julianDate, result);
+    });
+
+    return samplerRotation;
+  };
+
+  // 添加客机的标签 实体
+  const airPlan = viewer.entities.add({
+    id: "空中客机",
+    position: samplerTimeAndPosition,
+    usePlain: true,
+    setRotation: true,
+    label: {
+      text: new CallbackProperty((time) => {
+        if (!samplerTimeAndPosition.getValue(time)) return "";
+        let [lon, lat] = transformCartesian3ToWGS84(
+          samplerTimeAndPosition.getValue(time),
+        );
+        // 小数会缺少0，需要补齐
+        return `经度：${lon.toFixed(2)}\n纬度：${lat.toFixed(2)}`;
+      }, false),
+      font: "12px Helvetica Neue",
+      scale: 1,
+      outlineWidth: 1,
+      showBackground: true,
+      backgroundColor: new Color(0.165, 0.165, 0.165, 0.5),
+      fillColor: Color.fromCssColorString("#59cfb5"),
+      pixelOffset: new Cartesian2(-20, -40),
+      horizontalOrigin: HorizontalOrigin.LEFT,
+      verticalOrigin: VerticalOrigin.CENTER,
+    },
+    billboard: {
+      width: 36,
+      height: 36,
+      image: "/plain.svg", // 改为 public 文件夹路径
+      heightReference: HeightReference.NONE,
+      disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      // 图片旋转
+      rotation: createRotationSampler(),
+    },
+    // model: {
+    //   uri: "./sat.glb",
+    //   scale: 100,
+    // },
+    // 方向
+    orientation:
+      samplerTimeAndPosition.constructor === Cartesian3
+        ? null
+        : new VelocityOrientationProperty(samplerTimeAndPosition),
+    // 创建 转向例子
+    createRotationSampler: createRotationSampler(),
+  });
+
+  // 两边打点 起
+  viewer.entities.add({
+    id: "点位起点",
+    point: {
+      // pixelSize: 15,
+    },
+    position: toCesiumPosition(airRoute.from),
+    billboard: {
+      width: 20,
+      height: 25,
+      image: "/location.svg", // 改为 public 文件夹路径
+      heightReference: HeightReference.NONE,
+      disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      // 图片旋转
+      // rotation: createRotationSampler(),
+    },
+  });
+  // 两边打点 终
+  viewer.entities.add({
+    id: "点位终点",
+    point: {
+      // pixelSize: 15,
+    },
+    position: toCesiumPosition(airRoute.to),
+    billboard: {
+      width: 20,
+      height: 25,
+      image: "/location.svg", // 改为 public 文件夹路径
+      heightReference: HeightReference.NONE,
+      disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      // 图片旋转
+      // rotation: createRotationSampler(),
+    },
+  });
+
+  // 获取漫游位置
+  const getRoamingPosition = (time) => {
+    // viewer.trackedEntity = airPlan; //TODO 直接追踪目标
+    // return;
+    const position = airPlan.position.getValue(time); // 位置
+    const orientation = airPlan.orientation.getValue(time); // 方向
+    setCameraPosition({ position, airPlan, orientation, allHeight }, viewer);
+  };
+
+  //  在每次场景渲染之后触发
+  viewer.scene.postRender.addEventListener((scene, time) =>
+    getRoamingPosition(time),
+  );
+};
+
+// 设置相机位置
+const setCameraPosition = (
+  { position, airPlan, orientation, allHeight },
+  viewer,
+) => {
+  if (!position) return;
+  // 取出对应的位置要求
+  const [x, y, z] = [...transformCartesian3ToWGS84(position)];
+  // 假设 toCesiumPosition 函数将其他位置格式转换为 Cesium.Cartesian3
+  const cartesianPosition = toCesiumPosition([x, y, z]); // x, y, z 是位置的坐标
+  // 使用 Cesium 的地理坐标转换方法
+  const cartographicPosition =
+    Cesium.Cartographic.fromCartesian(cartesianPosition);
+  // 获取经度和纬度
+  const longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
+  const latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
+  // 上帝视角
+  (() => {
+    // console.log("经度:", longitude, "纬度:", latitude);
+    const center = Cesium.Cartesian3.fromDegrees(longitude, latitude);
+    viewer.camera.lookAt(
+      center,
+      new Cesium.Cartesian3(0.0, 0, allHeight * 1.3),
+    );
+  })();
+  (() => {
+    return;
+    // 创建四元数
+    const quaternion = new Cesium.Quaternion(
+      orientation.w,
+      orientation.x,
+      orientation.y,
+      orientation.z,
+    );
+    // 将四元数转换为旋转矩阵
+    const rotationMatrix = Cesium.Matrix3.fromQuaternion(quaternion);
+
+    //第一视角核心代码------------
+    const headingPitchRoll = new Cesium.HeadingPitchRoll();
+    const center = Cesium.Cartesian3.fromDegrees(
+      longitude,
+      latitude,
+      allHeight,
+    );
+    // 位置
+    let transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
+    // 位置 转换
+    transform = Cesium.Matrix4.fromRotationTranslation(
+      Cesium.Matrix3.fromQuaternion(orientation),
+      center,
+    );
+    // 目标指向
+    viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(-100, 0, 0));
+    // 拉远相机视角
+    viewer.scene.postRender.addEventListener(() => viewer.camera.zoomOut(100));
+
+    // console.log(" airPlan :", airPlan);
+  })();
+};
+
+// 从旋转矩阵计算方位角
+function matrix3ToHeadingPitchRoll(matrix3) {
+  var heading, pitch, roll;
+  // Extract individual rotations from the rotation matrix
+  pitch = Math.asin(-matrix3[7]); // pitch
+  roll = Math.atan2(matrix3[6], matrix3[8]); // roll
+  heading = Math.atan2(matrix3[1], matrix3[4]); // heading
+
+  return {
+    heading: heading,
+    pitch: pitch,
+    roll: roll,
+  };
+}
+
+// 相机 聚焦
+export const cameraAnimation = (viewer, position, orientation) => {
+  // 带飞行动画 飞行到指定的笛卡尔坐标
+  viewer.camera.flyTo({
+    destination: Cesium.Cartesian3.fromDegrees(...position),
+    duration: 2, // 单位
+    orientation: {
+      // 默认(0,-90,0)
+      ...orientation,
+    },
+  });
+
+  // 相机 聚焦到笛卡尔坐标
+  // viewer.camera.setView({
+  //   destination: position,
+  //   orientation: {
+  //     // 默认(0,-90,0)
+  //     heading: Cesium.Math.toRadians(0), // 左右
+  //     pitch: Cesium.Math.toRadians(-70), // 上下
+  //     roll: Cesium.Math.toRadians(0), // 歪头
+  //   },
+  // });
+
+  // 相机 看的指定视角 类似theejs相机lookAt
+  /**
+   * heading 、 pitch 、range
+   */
+  // viewer.camera.lookAt(
+  //   position,
+  //   new Cesium.HeadingPitchRange(
+  //     Cesium.Math.toRadians(0),
+  //     Cesium.Math.toRadians(-90),
+  //     4000
+  //   )
+  // );
+};
+
+// 添加点 和 图片 和模型 <组合实体> billboard label line
+export const addPointer = (
+  viewer,
+  {
+    position,
+    pointColor,
+    pointerSize,
+    id,
+    label = {},
+    billboard,
+    // 近处和远处的缩放比例
+    nearScale = 1.0,
+    farScale = 0.85,
+    // 距离阈值（米）
+    nearDistance = 1000,
+    farDistance = 400000000,
+    hoverImage,
+  } = {},
+) => {
+  if (!viewer) {
+    throw new Error("addPointer: viewer参数是必需的");
+  }
+  if (!position) {
+    throw new Error("addPointer: position参数是必需的");
+  }
+  // 构建实体配置
+  const entityConfig = {
+    id,
+    position: toCesiumPosition([...position]),
+    usePlain: true,
+    hoverImage: hoverImage || "",
+  };
+  // 只有在 pointColor 有值且 pointerSize > 0 时才添加 point
+  if (pointColor && pointColor.trim() !== "" && pointerSize > 0) {
+    try {
+      entityConfig.point = {
+        pixelSize: pointerSize,
+        color: toCesiumColor(pointColor),
+      };
+    } catch (e) {
+      console.warn("创建 point 失败:", e);
+    }
+  }
+
+  // 添加 label
+  if (label) {
+    entityConfig.label = {
+      font: "12px Helvetica Neue",
+      scale: 1,
+      outlineWidth: 1,
+      showBackground: true,
+      horizontalOrigin: HorizontalOrigin.LEFT,
+      verticalOrigin: VerticalOrigin.CENTER,
+      scaleByDistance: new Cesium.NearFarScalar(
+        nearDistance,
+        1.0,
+        farDistance,
+        0.2,
+      ),
+      ...label,
+    };
+  }
+  // 添加 billboard（图标）
+  if (billboard) {
+    entityConfig.billboard = {
+      heightReference: HeightReference.NONE,
+      disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      scaleByDistance: new Cesium.NearFarScalar(
+        nearDistance, // 当距离 <= 1000米时
+        nearScale, // 缩放比例为 1.0
+        farDistance, // 当距离 >= 1000000米时
+        farScale, // 缩放比例为 0.1
+      ),
+      ...billboard,
+    };
+  }
+  // 添加实体
+  const pointer = viewer.entities.add(entityConfig);
+  return pointer;
+};
+
+// 添加线
+export const addLine = (viewer) => {
+  // 画线
+  const ployLine = viewer.entities.add({
+    polyline: {
+      // 无高度
+      // positions: Cesium.Cartesian3.fromDegreesArray([
+      //   120, 20, 121, 20, 121, 20.5,
+      // ]),
+
+      // 有高度
+      // positions: Cesium.Cartesian3.fromDegreesArrayHeights([
+      //   120, 20, 0, 121, 20, 50, 121, 20.5, 100,
+      // ]),
+
+      width: 10,
+      material: Cesium.Color.GREEN,
+    },
+  });
+  // viewer.zoomTo(ployLine);
+};
+
+// 添加模型的俩种方法
+export const add3DModel = (viewer, airShipPosition, cameraPosition) => {
+  // entities 添加模型 到cesiume
+  const model = viewer.entities.add({
+    position: airShipPosition,
+    name: "飞船一号",
+    model: {
+      uri: "./airship.glb",
+    },
+  });
+  viewer.flyTo(model); // 相机聚焦到指定的位置
+  // console.log("entities添加的模型:", model);
+
+  // primitives 添加模型 到cesiume
+  // const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(cameraPosition);
+  // viewer.scene.primitives
+  //   .add(
+  //     Cesium.Model.fromGltf({
+  //       url: "./airship.glb",
+  //       modelMatrix: matrix,
+  //     })
+  //   )
+  //   .readyPromise.then((model) => {
+  //     // 等待模型加载完成后获取模型的位置信息
+  //     const boundingSphere = model.boundingSphere;
+  //     const modelPosition = boundingSphere.center;
+
+  //     // 设置相机视角
+  //     viewer.camera.setView({
+  //       destination: modelPosition,
+  //       orientation: {
+  //         heading: Cesium.Math.toRadians(0), // 左右
+  //         pitch: Cesium.Math.toRadians(-45), // 上下
+  //         roll: Cesium.Math.toRadians(0), // 歪头
+  //       },
+  //     });
+
+  //     console.log("primitives添加的模型: :", model);
+  //   });
+};
+
+// 初始化 事件
+export const initEvents = ({ viewer, scene, camera, entities, clock }) => {
+  // 添加实体和设置点击事件处理器的代码 每一帧运行
+  // viewer.scene.postRender.addEventListener(updatePosition());
+  // viewer.scene.preRender.addEventListener(updatePosition());
+  // 禁用双击事件
+  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+    ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  );
+
+  let allEntitiesIds;
+  // 监听实体添加
+  entities.collectionChanged.addEventListener((collection, added, removed) => {
+    let old = allEntitiesIds;
+    let current = collection.values.map((item) => item.id);
+    if (!isArrayEqual(old, current)) {
+      allEntitiesIds = entities.values.map((item) => item.id);
+    }
+  });
+
+  //实体点击事件
+  const handler = new ScreenSpaceEventHandler(scene.canvas);
+  handler.setInputAction(
+    (e) => emitClickEvent(e, ScreenSpaceEventType.LEFT_CLICK),
+    ScreenSpaceEventType.LEFT_CLICK,
+  );
+  // 左键双击
+  // handler.setInputAction(
+  //   (e) => emitClickEvent(e, ScreenSpaceEventType.LEFT_DOUBLE_CLICK),
+  //   ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+  // );
+  // 右键
+  // handler.setInputAction(
+  //   (e) => emitClickEvent(e, ScreenSpaceEventType.RIGHT_CLICK),
+  //   ScreenSpaceEventType.RIGHT_CLICK
+  // );
+  const emitClickEvent = (event, type) => {
+    // 直接输出可复制的格式
+    const currentHeading = Cesium.Math.toDegrees(viewer.camera.heading);
+    const currentPitch = Cesium.Math.toDegrees(viewer.camera.pitch);
+    const currentRoll = Cesium.Math.toDegrees(viewer.camera.roll);
+
+    const cameraPosition = viewer.camera.positionCartographic;
+    const longitude = Cesium.Math.toDegrees(cameraPosition.longitude);
+    const latitude = Cesium.Math.toDegrees(cameraPosition.latitude);
+    const height = cameraPosition.height;
+
+    // 输出可以直接复制粘贴的代码
+    console.log(`位置: [${longitude}, ${latitude}, ${height}]`);
+    console.log(
+      `角度: { heading: ${currentHeading}, pitch: ${currentPitch}, roll: ${currentRoll} }`,
+    );
+
+    // id模型 primitive模型的集合图形材质
+    const { id, primitive } = scene.pick(event.position) || {
+      id: undefined,
+      primitive: undefined,
+    };
+    if (id) {
+      console.log(" 点击的模型 :", id);
+    }
+  };
+
+  const ellipsoid = Cesium.Ellipsoid.WGS84; // 使用默认的WGS84地球椭球体
+  // 鼠标hover位置
+  handler.setInputAction((movement) => {
+    const cartesian = viewer.camera.pickEllipsoid(
+      movement.endPosition,
+      ellipsoid,
+    );
+    if (cartesian) {
+      const cartographic =
+        viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+      //将地图坐标（弧度）转为十进制的度数
+      const lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
+        4,
+      ); //经
+      const log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
+        4,
+      ); //纬
+      const alti_String = (
+        viewer.camera.positionCartographic.height / 1000
+      ).toFixed(2); //高
+
+      // console.log("鼠标位置经纬度:", log_String, lat_String, alti_String);
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  return allEntitiesIds;
+};
+
+// 渲染更新 位置
+export const followModel = (viewer, options) => {
+  const { targetModel, selfModel, startPosition, endPosition } = options;
+  // 获取当前时间
+  const currentTime = Cesium.JulianDate.now();
+  // 获取猎物和自身的初始位置
+  const initialTargetPosition = targetModel._position.getValue(currentTime);
+  const initialOwnPosition = selfModel._position.getValue(currentTime);
+
+  // 使用 CallbackProperty 更新位置
+  targetModel._position = new Cesium.CallbackProperty(() => {
+    initialTargetPosition.x += 100;
+    return initialTargetPosition;
+  }, false);
+
+  selfModel._posistion = new Cesium.CallbackProperty(() => {
+    // 计算自身位置，例如通过中点
+    return Cartesian3.midpoint(
+      toCesiumPosition(startPosition),
+      initialTargetPosition, // 获取当前猎物位置
+      new Cartesian3(),
+    );
+  }, false);
+
+  selfModel._orientation = new Cesium.CallbackProperty(() => {
+    const satellitePosition = toCesiumPosition(startPosition); // 光波头
+    const targetPosition = initialTargetPosition; // 光波尾部
+    // 获取航向角
+    const h = getHeading(satellitePosition, targetPosition);
+    // 获取俯仰角
+    const p = getPitch(satellitePosition, targetPosition);
+    const hpr = new HeadingPitchRoll(
+      CesiumMath.toRadians(90),
+      CesiumMath.toRadians(90),
+      CesiumMath.toRadians(0),
+    );
+    hpr.pitch -= p;
+    hpr.heading += h;
+    return Transforms.headingPitchRollQuaternion(satellitePosition, hpr);
+  }, false);
+
+  selfModel._cylinder.length = new Cesium.CallbackProperty(() => {
+    const satellitePosition = toCesiumPosition(startPosition);
+    const targetPosition = initialTargetPosition;
+    return Cesium.Cartesian3.distance(satellitePosition, targetPosition);
+  }, false);
+
+  // 监听每帧更新
+  viewer.scene.postRender.addEventListener(() => {});
+};
+
+/**
+ * @description: 点聚合功能效果
+ * @param {*} viewer  source：资源文件  image：主图 imgs：聚合图标数组
+ * @return {*}
+ */
+export const initCluster = (viewer, { source, image: mainImage, imgs }) => {
+  const [A1, B1, C1, D1] = imgs;
+  // return;
+  // TODO: 加载geojson数据
+  new Cesium.GeoJsonDataSource().load(source).then((dataSource) => {
+    viewer.dataSources.add(dataSource);
+    // 设置聚合参数
+    dataSource.clustering.enabled = true;
+    dataSource.clustering.pixelRange = 60;
+    dataSource.clustering.minimumClusterSize = 2;
+
+    // foreach用于调用数组的每个元素，并将元素传递给回调函数。
+    dataSource.entities.values.forEach((entity) => {
+      console.log(" 每一项entity :", entity);
+
+      // 将点拉伸一定高度，防止被地形压盖
+      entity.position._value.z += 50.0;
+      // 使用大小为64*64的icon，缩小展示poi
+      entity.billboard = {
+        image: mainImage,
+        width: 32,
+        height: 32,
+      };
+      entity.label = {
+        text: "POI",
+        font: "bold 15px Microsoft YaHei",
+        // 竖直对齐方式
+        verticalOrigin: Cesium.VerticalOrigin.CENTER,
+        // 水平对齐方式
+        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+        // 偏移量
+        pixelOffset: new Cesium.Cartesian2(15, 0),
+      };
+    });
+
+    // 添加监听函数
+    dataSource.clustering.clusterEvent.addEventListener(
+      function (clusteredEntities, cluster) {
+        // 关闭自带的显示聚合数量的标签
+        cluster.label.show = false;
+        cluster.billboard.show = true;
+        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
+
+        // 根据聚合数量的多少设置不同层级的图片以及大小
+        if (clusteredEntities.length >= 20) {
+          cluster.billboard.image = combineIconAndLabel(
+            D1,
+            clusteredEntities.length,
+            64,
+          );
+          cluster.billboard.width = 72;
+          cluster.billboard.height = 72;
+        } else if (clusteredEntities.length >= 12) {
+          cluster.billboard.image = combineIconAndLabel(
+            C1,
+            clusteredEntities.length,
+            64,
+          );
+          cluster.billboard.width = 56;
+          cluster.billboard.height = 56;
+        } else if (clusteredEntities.length >= 8) {
+          cluster.billboard.image = combineIconAndLabel(
+            B1,
+            clusteredEntities.length,
+            64,
+          );
+          cluster.billboard.width = 48;
+          cluster.billboard.height = 48;
+        } else {
+          cluster.billboard.image = combineIconAndLabel(
+            A1,
+            clusteredEntities.length,
+            64,
+          );
+          cluster.billboard.width = 40;
+          cluster.billboard.height = 40;
+        }
+      },
+    );
+  });
+};
+
+/**
+ * @description: 将图片和文字合成新图标使用（参考Cesium源码）
+ * @param {*} url：图片地址
+ * @param {*} label：文字
+ * @param {*} size：画布大小
+ * @return {*} 返回canvas
+ */
+export const combineIconAndLabel = (url, label, size) => {
+  // 创建画布对象
+  let canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  let ctx = canvas.getContext("2d");
+
+  let promise = new Cesium.Resource.fetchImage(url).then((image) => {
+    // 异常判断
+    try {
+      ctx.drawImage(image, 0, 0);
+    } catch (e) {
+      console.log(e);
+    }
+
+    // 渲染字体
+    // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
+    ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
+    ctx.font = "bold 20px Microsoft YaHei";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, size / 2, size / 2);
+
+    return canvas;
+  });
+  return promise;
+};
+
+/**
+ * 最简单的悬停功能 - 只有30行代码
+ * @param {Viewer} viewer Cesium Viewer
+ * @param {Function} onHover 悬停回调
+ */
+export const addHover = (viewer, onHover) => {
+  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+  let hoverTimer = null;
+  let currentEntity = null;
+  handler.setInputAction((movement) => {
+    const picked = viewer.scene.pick(movement.endPosition);
+    if (picked && picked.id) {
+      const entity = picked.id;
+      if (currentEntity !== entity) {
+        // 清除上一个悬停
+        if (hoverTimer) clearTimeout(hoverTimer);
+        if (currentEntity && currentEntity.billboard) {
+          // currentEntity.billboard.scale = 1.0
+          // 恢复图片
+          if (currentEntity._originalImage) {
+            currentEntity.billboard.image = currentEntity._originalImage;
+            delete currentEntity._originalImage;
+          }
+        }
+        // 设置新悬停
+        currentEntity = entity;
+        viewer.scene.canvas.style.cursor = "pointer";
+        hoverTimer = setTimeout(() => {
+          if (entity.billboard) {
+            // entity.billboard.scale = 1.2
+            // 如果有hoverImage就替换
+            if (entity.hoverImage) {
+              // 保存原始图片
+              entity._originalImage = entity.billboard.image;
+              // 替换为hover图片
+              entity.billboard.image = entity.hoverImage;
+            }
+          }
+          if (onHover) onHover(entity);
+        }, 300);
+      }
+    } else {
+      // 没有悬停
+      if (hoverTimer) clearTimeout(hoverTimer);
+      if (currentEntity && currentEntity.billboard) {
+        // currentEntity.billboard.scale = 1.0
+        // 恢复图片
+        if (currentEntity._originalImage) {
+          currentEntity.billboard.image = currentEntity._originalImage;
+          delete currentEntity._originalImage;
+        }
+      }
+      viewer.scene.canvas.style.cursor = "default";
+      currentEntity = null;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  // 返回清理函数
+  return () => {
+    handler.destroy();
+    if (hoverTimer) clearTimeout(hoverTimer);
+  };
+};
+
+export const cc = () => {
+  return 1;
+};