1

src/App.vue

@@ -13,9 +13,12 @@ import baozha from './components/baozha.vue'
 import kedupan from './components/kedupan.vue'
 import raotaiyang from './components/raotaiyng.vue'
 import qq from './components/qq.vue'
+import setl from './components/setl.vue'
+import xyz from './components/xyz.vue'
+
 export default {
   name: 'app',
-  components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq}
+  components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq,setl,xyz}
 }
 </script>
 
@@ -31,8 +34,10 @@ export default {
 <!-- <draw/> -->
 <!-- <camera/> -->
 <!-- <dail/> -->
-<raotaiyang/>
+<!-- <raotaiyang/> -->
 <!-- <qq/> -->
+<xyz/>
+<!-- <setl/> -->
 </template>
 
 <style scoped>

src/components/qq.vue

@@ -5,6 +5,7 @@
 <script setup>
 import { onMounted } from 'vue'
 import * as Cesium from 'cesium'
+import Cesium3DTile from 'cesium/Source/Scene/Cesium3DTile';
 
 
 onMounted(() => {
@@ -16,15 +17,32 @@ onMounted(() => {
   let handler;
 
   // 添加轨迹线实体
-  const polyline = viewer.entities.add({
+   viewer.entities.add({
     id: 'polyline',
-    polyline: {
-      positions: Cesium.Cartesian3.fromDegreesArray([-100, 20, -100, 30,-90,25]),
-      width: 20,
-      material: Cesium.Color.YELLOW,
-    },
+    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,300000), 
+      ellipsoid: {
+        radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
+      }
   });
 
+      const polyline = viewer.entities.add({
+          id: 'line',
+          polyline: {
+              positions: Cesium.Cartesian3.fromDegreesArray([-70, 30, -60, 20,-50,30]),
+              width:2,
+              material:Cesium.Color.YELLOW
+          }
+      })
+  viewer.entities.add({
+    id: "point",
+    position: Cesium.Cartesian3.fromDegrees(-85, 30, 100),
+    point: {
+        pixelSize: 10,
+        color: Cesium.Color.RED
+    }
+})
+
+
   // 添加用于显示标签的实体
   const entity = viewer.entities.add({
     label: {
@@ -34,79 +52,64 @@ onMounted(() => {
       horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
       verticalOrigin: Cesium.VerticalOrigin.TOP,
       pixelOffset: new Cesium.Cartesian2(15, 0),
+      eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
     },
   });
 
   // 设置鼠标事件处理器
   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);
+      // 将笛卡尔坐标转换为字符串
+      const cartesianString = `X: ${cartesian.x.toFixed(2)}, Y: ${cartesian.y.toFixed(2)}, Z: ${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`;
-      }
+        `X: ${cartesian.x.toFixed(2)}` +
+        `\nY: ${cartesian.y.toFixed(2)}` +
+        `\nZ: ${cartesian.z.toFixed(2)}`;
     } else {
       entity.label.show = false;
     }
-  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  // handler.setInputAction(function (movement) {
+  //   const cartesian = viewer.camera.pickEllipsoid(
+  //     movement.endPosition,
+  //     scene.globe.ellipsoid
+  //   );
+  //   if (cartesian) {
+  //     const pickedEntity = viewer.scene.pick(movement.endPosition);
+
+  //     if (Cesium.defined(pickedEntity) && pickedEntity.id) {
+  //       const entityPosition = Cesium.Cartographic.fromCartesian(pickedEntity.id.position.getValue(viewer.clock.currentTime));
+  //       const longitudeString = Cesium.Math.toDegrees(entityPosition.longitude).toFixed(2);
+  //       const latitudeString = Cesium.Math.toDegrees(entityPosition.latitude).toFixed(2);
+  //       const heightString = entityPosition.height.toFixed(2);
+
+  //       entity.position = cartesian;
+  //       entity.label.show = true;
+  //       entity.label.text =
+  //         `Lon: ${longitudeString}\u00B0` +
+  //         `\nLat: ${latitudeString}\u00B0`;
+  //     } else {
+  //       entity.label.show = false;
+  //     }
+  //   } else {
+  //     entity.label.show = false;
+  //   }
+  // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
 
 

src/components/setl.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 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),
+      eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
+    },
+  });
+
+  // 设置鼠标事件处理器
+  handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+  handler.setInputAction(function (movement) {
+    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);
+      entity.position = cartesian;
+      entity.label.show = true;
+      entity.label.text =`Lon: ${`   ${longitudeString}`.slice(-7)}\u00B0` +`\nLat: ${`   ${latitudeString}`.slice(-7)}\u00B0`;
+    } else {
+      entity.label.show = false;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+
+})
+</script>
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+</style>

src/components/xyz.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 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),
+      eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
+    },
+  });
+
+  // 设置鼠标事件处理器
+  handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+  handler.setInputAction(function (movement) {
+    const cartesian = viewer.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
+    if (cartesian) {
+      entity.position = cartesian;
+      entity.label.show = true;
+      entity.label.text =`X: ${cartesian.x.toFixed(2)}` +`\nY: ${cartesian.y.toFixed(2)}` +`\nZ: ${cartesian.z.toFixed(2)}`;
+    } else {
+      entity.label.show = false;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+
+})
+</script>
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+</style>