绕太阳

src/App.vue

@@ -11,16 +11,18 @@ import camera from './components/camera.vue'
 import dail from './components/dail.vue'
 import baozha from './components/baozha.vue'
 import kedupan from './components/kedupan.vue'
+import raotaiyang from './components/raotaiyng.vue'
+import qq from './components/qq.vue'
 export default {
   name: 'app',
-  components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan}
+  components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq}
 }
 </script>
 
 <template>
   <!-- <fire/> -->
 <!-- <demo/> -->
-<kedupan/>
+<!-- <kedupan/> -->
 <!-- <boom></boom> -->
 <!-- <baozha/> -->
 <!-- <moon></moon> -->
@@ -29,6 +31,8 @@ export default {
 <!-- <draw/> -->
 <!-- <camera/> -->
 <!-- <dail/> -->
+<raotaiyang/>
+<!-- <qq/> -->
 </template>
 
 <style scoped>

src/components/qq.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+
+  const scene = viewer.scene;
+  let handler;
+
+  // 添加轨迹线实体
+  const polyline = viewer.entities.add({
+    id: 'polyline',
+    polyline: {
+      positions: Cesium.Cartesian3.fromDegreesArray([-100, 20, -100, 30,-90,25]),
+      width: 20,
+      material: Cesium.Color.YELLOW,
+    },
+  });
+
+  // 添加用于显示标签的实体
+  const entity = viewer.entities.add({
+    label: {
+      show: false,
+      showBackground: true,
+      font: "16px monospace",
+      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+      verticalOrigin: Cesium.VerticalOrigin.TOP,
+      pixelOffset: new Cesium.Cartesian2(15, 0),
+    },
+  });
+
+  // 设置鼠标事件处理器
+  handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+  // 处理鼠标移动事件
+  handler.setInputAction(function (movement) {
+    const pickedObject = viewer.scene.pick(movement.endPosition);
+    if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.id === 'polyline') {
+      const cartesian = viewer.camera.pickEllipsoid(
+        movement.endPosition,
+        scene.globe.ellipsoid
+      );
+      if (cartesian) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
+        const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
+        const heightString = cartographic.height.toFixed(2);
+
+        const xString = cartesian.x.toFixed(2);
+        const yString = cartesian.y.toFixed(2);
+        const zString = cartesian.z.toFixed(2);
+
+        entity.position = cartesian;
+        entity.label.show = true;
+        entity.label.text =
+          `Lon: ${`   ${longitudeString}`.slice(-7)}\u00B0` +
+          `\nLat: ${`   ${latitudeString}`.slice(-7)}\u00B0` +
+          `\nHeight: ${heightString} m` +
+          `\n\nECEF:` +
+          `\nX: ${xString} m` +
+          `\nY: ${yString} m` +
+          `\nZ: ${zString} m`;
+      }
+    } else {
+      entity.label.show = false;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+
+  handler.setInputAction(function (movement) {
+    const pickedObject = viewer.scene.pick(movement.position);
+    if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.id === 'polyline') {
+      const cartesian = viewer.camera.pickEllipsoid(
+        movement.position,
+        scene.globe.ellipsoid
+      );
+      if (cartesian) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
+        const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
+        const heightString = cartographic.height.toFixed(2);
+
+        const xString = cartesian.x.toFixed(2);
+        const yString = cartesian.y.toFixed(2);
+        const zString = cartesian.z.toFixed(2);
+
+        entity.position = cartesian;
+        entity.label.show = true;
+        entity.label.text =
+          `Lon: ${`   ${longitudeString}`.slice(-7)}\u00B0` +
+          `\nLat: ${`   ${latitudeString}`.slice(-7)}\u00B0` +
+          `\nHeight: ${heightString} m` +
+          `\n\nECEF:` +
+          `\nX: ${xString} m` +
+          `\nY: ${yString} m` +
+          `\nZ: ${zString} m`;
+      }
+    } else {
+      entity.label.show = false;
+    }
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+
+
+
+
+
+})
+
+
+
+</script>
+
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+
+.cesium-viewer-bottom {
+  display: none;
+}
+
+button {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 88;
+}
+</style>

src/components/raotaiyng.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+import { ref } from 'vue'
+
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+
+  })
+  // 初始化时钟
+  const start = Cesium.JulianDate.fromDate(new Date());
+  const adjustedStart = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
+  const stop = Cesium.JulianDate.addSeconds(adjustedStart, 360, new Cesium.JulianDate());
+
+  viewer.clock.startTime = adjustedStart.clone();
+  viewer.clock.stopTime = stop.clone();
+  viewer.clock.currentTime = adjustedStart.clone();
+  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
+  viewer.clock.multiplier = 1;
+  viewer.timeline.zoomTo(adjustedStart, stop);
+  const scene = viewer.scene;
+  let handler;
+
+  // 定义轨道的相关参数
+  const inclination = Cesium.Math.toRadians(28.5); // 轨道倾角（以弧度表示）
+  const semiMajorAxis = 38440000; // 半长轴（米），大约为月球到地球的平均距离
+  const period = 360; // 轨道周期（秒）
+  const numberOfPoints = 1000; // 轨道上的点数
+
+  // 创建月球轨道
+  function createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints) {
+    const positions = [];
+    for (let i = 0; i <= numberOfPoints; i++) {
+      const meanAnomaly = (2 * Math.PI / period) * (i * period / numberOfPoints);
+      const trueAnomaly = meanAnomaly; // 简化处理，假设轨道是圆的
+      const radius = semiMajorAxis; // 圆轨道的半径等于半长轴
+      const x = radius * Math.cos(trueAnomaly);
+      const y = radius * Math.sin(trueAnomaly) * Math.cos(inclination);
+      const z = radius * Math.sin(trueAnomaly) * Math.sin(inclination);
+      const cartographic = Cesium.Cartographic.fromCartesian(Cesium.Cartesian3.fromElements(x, y, z));
+      positions.push(cartographic);
+    }
+    return positions;
+  }
+
+  const moonOrbitPositions = createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints);
+  const cartesianPositions = moonOrbitPositions.map(position => Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height));
+  const orbitPosition = new Cesium.SampledPositionProperty();
+
+  for (let i = 0; i <= numberOfPoints; i++) {
+    const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / numberOfPoints, new Cesium.JulianDate());
+    orbitPosition.addSample(time, cartesianPositions[i]);
+  }
+
+  // 创建月球实体
+  const moonEntity = viewer.entities.add({
+    name: 'Moon',
+    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
+      start: start,
+      stop: stop
+    })]),
+    position: orbitPosition,
+    orientation: new Cesium.VelocityOrientationProperty(orbitPosition),
+    // point: {
+    //   pixelSize: 10,
+    //   color: Cesium.Color.WHITE
+    // },
+    model: {
+      uri: '/src/model/moon1.glb',
+      minimumPixelSize: 100,
+      scale: 200.0,
+    },
+    path: {
+      resolution: 1,
+      material: new Cesium.PolylineGlowMaterialProperty({
+        glowPower: 0.1,
+        color: Cesium.Color.PINK
+      }),
+      width: 5
+    }
+  });
+
+  moonEntity.position.setInterpolationOptions({
+    interpolationDegree: 5,
+    interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
+  });
+
+
+
+
+
+
+
+
+  // 获取当前时间的笛卡尔坐标
+  function getCartesianPositionAtTime(julianDate) {
+    const result = new Cesium.Cartesian3();
+    orbitPosition.getValue(julianDate, result);
+    return result;
+  }
+  console.log(orbitPosition)
+  const currentPosition = getCartesianPositionAtTime(viewer.clock.currentTime);
+  const moonEllipsoid = new Cesium.Ellipsoid(1737400.0, 1737400.0, 1737400.0);
+
+  // 计算月球赤道位置
+  function computeMoonPosition(number, currentPosition) {
+    const positions = [];
+    const localToFixedFrameMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(currentPosition);
+    for (let i = 0; i <= number; i++) {
+      const angle = (i / number) * 360.0;
+      const radians = Cesium.Math.toRadians(angle);
+      const x = moonEllipsoid.radii.x * Math.cos(radians);
+      const y = moonEllipsoid.radii.y * Math.sin(radians);
+      const z = 0;
+      const moon = Cesium.Matrix4.multiplyByPoint(localToFixedFrameMatrix, new Cesium.Cartesian3(x, y, z), new Cesium.Cartesian3());
+      positions.push(moon);
+    }
+    return positions;
+  }
+
+  let moonEquatorPositions = computeMoonPosition(numberOfPoints, currentPosition);
+
+  function qq() {
+    // 创建代表月球赤道轨道的实体
+    const satelliteOrbitEntity = viewer.entities.add({
+      polyline: {
+        positions: moonEquatorPositions,
+        width: 2,
+        material: new Cesium.PolylineGlowMaterialProperty({
+          glowPower: 0.1,
+          color: Cesium.Color.PINK
+        }),
+      }
+    });
+  }
+
+  // 创建代表卫星的实体
+  const satelliteEntity = viewer.entities.add({
+    position: new Cesium.CallbackProperty(function (time, result) {
+      const currentPosition = getCartesianPositionAtTime(time);
+      moonEquatorPositions = computeMoonPosition(numberOfPoints, currentPosition);
+   
+      const seconds = Cesium.JulianDate.secondsDifference(time, viewer.clock.startTime);
+      const index = Math.floor((seconds % period) / period * numberOfPoints);
+      return moonEquatorPositions[index];
+    }, false),
+    // point: {
+    //   pixelSize: 10,
+    //   color: Cesium.Color.RED
+    // }
+    model: {
+      uri: '/src/model/卫星.gltf',
+      minimumPixelSize: 100,
+      scale: 200.0,
+    },
+  });
+
+
+
+
+
+ 
+
+
+
+
+
+
+})
+
+
+
+</script>
+
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+
+.cesium-viewer-bottom {
+  display: none;
+}
+
+button {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 88;
+}
+</style>