2

src/App.vue

@@ -22,6 +22,7 @@ import kuosanquan from './components/kuosanyuan.vue'
 import relitu from './components/relitu.vue'
 // import test from './components/test.vue'
 import dengyue from './components/dengyue.vue'
+import dici from './components/dici.vue'
 
 //封装
 import point from './encapsulation/point.vue'
@@ -34,7 +35,7 @@ import sensor from './encapsulation/sensor.vue'
 export default {
   name: 'app',
   components: {
-    boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,jiguang,shiqushiti,kuosanquan,relitu,dengyue,
+    boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,jiguang,shiqushiti,kuosanquan,relitu,dengyue,dici,
     point, lineq,polygonq,sensor
   }
 }
@@ -60,10 +61,11 @@ export default {
   <!-- <lineq/> -->
   <!-- <jiguang/> -->
   <!-- <shiqushiti/> -->
-  <!-- <kuosanquan/> -->
+  <kuosanquan/>
   <!-- <relitu/> -->
 <!-- <test/> -->
-<dengyue/>
+<!-- <dengyue/> -->
+<!-- <dici/> -->
 
   <!-- <point/> -->
   <!-- <polygonq/> -->

src/components/dici.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+import Cartesian2 from 'cesium/Source/Core/Cartesian2';
+
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  // const esri = new Cesium.ArcGisMapServerImageryProvider({
+  //   url: url,
+  //   enablePickFeatures:false
+  // })
+
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+    // imageryProvider:esri
+
+    // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+    //   url: "/src/image/moon1.jpg"
+    // }),
+
+  })
+
+  const mantleRadius = 6400000.0;
+  const sunEntity = viewer.entities.add({
+    position: Cesium.Cartesian3.ZERO,
+    ellipsoid: {
+      radii: new Cesium.Cartesian3(
+        mantleRadius,
+        mantleRadius,
+        mantleRadius
+      ),
+      material: new Cesium.ImageMaterialProperty({
+        image: "/src/image/dici.png",
+        // repeat: new Cartesian2(1, 1)
+        repeat:new Cartesian2(1,1)
+      })
+    },
+  })
+
+
+})
+</script>
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+</style>

src/components/jiguang.vue

@@ -33,7 +33,7 @@ onMounted(() => {
       ]),
       width: 1,
       material: new PolylineTrailLinkMaterialProperty(
-        '/src/image/流动.png', Cesium.Color.fromBytes(0, 255, 0).withAlpha(0.8),
+        '/src/image/流动.png', Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.8),
         1000
       ),
     },

src/components/nasa.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>