fix:首页

src/views/Screen/items/home.vue

@@ -7,14 +7,54 @@
 export default {
   name: "cesium",
   data() {
-    return {};
+    return {
+      viewer: null,
+      tileset: null, // 存储加载的3D Tileset
+      markerList: [
+        {
+          longitude: 113.43095267132009, // 经度 (示例值，请替换为实际值)
+          latitude: 32.54745665190039,   // 纬度 (示例值，请替换为实际值)
+          height: 70,          // 高度 (米)
+          des: {
+            name: '指挥中心',
+            height: 300
+          }
+        },
+        {
+          longitude: 113.42852104976393, // 经度 (示例值，请替换为实际值)
+          latitude: 32.54756929901858,    // 纬度 (示例值，请替换为实际值)
+          height: 35,           // 高度 (米)
+          des: {
+            name: '交电所',
+            height: 100
+          }
+        },
+        {
+          longitude: 113.42927005190415, // 经度 (示例值，请替换为实际值)
+          latitude: 32.5467314676447,   // 纬度 (示例值，请替换为实际值)
+          height: 40,          // 高度 (米)
+          des: {
+            name: '西矿厂',
+            height: 300
+          }
+        },
+        {
+          longitude: 113.43050560273339, // 经度 (示例值，请替换为实际值)
+          latitude: 32.544308886167876,   // 纬度 (示例值，请替换为实际值)
+          height: 40,          // 高度 (米)
+          des: {
+            name: '办公楼',
+            height: 300
+          }
+        },
+      ],
+    };
   },
   created() {
-    var that = this;
     this.$nextTick(() => {
       Cesium.Ion.defaultAccessToken =
         "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZmY5ZWUyZS00MjQwLTQzZjUtYTBjZi02ZWZiYzJhMmY2NTYiLCJpZCI6MTMxMzY5LCJpYXQiOjE3NDE2NzY4Mzh9.QD-8cQI_VqPG2t-S8KxLyMFux0R429lfTdhQWrdeWhE";
-      const viewer = new Cesium.Viewer("cesiumContainer", {
+      this.viewer = new Cesium.Viewer("cesiumContainer", {
         homeButton: false,
         sceneModePicker: false,
         baseLayerPicker: false,
@@ -28,53 +68,115 @@ export default {
         scene3DOnly: true,
         navigationHelpButton: false,
       });
-      viewer.cesiumWidget.creditContainer.style.display = "none";
+      this.viewer.cesiumWidget.creditContainer.style.display = "none";
 
-      // 使用 fromUrl 方法加载模型
+      // 加载3D Tileset
       Cesium.Cesium3DTileset.fromUrl("/terra_b3dms/tileset.json")
         .then((tileset) => {
-          viewer.scene.primitives.add(tileset);
-          viewer.zoomTo(tileset);
+          this.tileset = tileset; // 存储tileset供后续使用
+          this.viewer.scene.primitives.add(tileset);
           
           // 调整模型高度
-          var heightOffset = -330.0; // 调整这个值以匹配地形高度
+          var heightOffset = -330.0;
           var boundingSphere = tileset.boundingSphere;
-          var cartographic = Cesium.Cartographic.fromCartesian(
-            boundingSphere.center
-          );
-
-          var surface = Cesium.Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            0.0
-          );
-
-          var offset = Cesium.Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            cartographic.height + heightOffset
-          );
-
-          var translation = Cesium.Cartesian3.subtract(
-            offset,
-            surface,
-            new Cesium.Cartesian3()
-          );
-
+          var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightOffset);
+          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
           tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 
-          tileset.maximumMemoryUsage = 1024 * 1024;
-          tileset.maximumScreenSpaceError = 4;
-
           // 开启地形深度检测
-          viewer.scene.globe.depthTestAgainstTerrain = true;
+          this.viewer.scene.globe.depthTestAgainstTerrain = true;
+          return this.viewer.zoomTo(tileset);
+        })
+        .then(() => {
+          // 添加标记点
+          this.addMarkers();
         })
         .catch((error) => {
           console.error("模型加载失败:", error);
         });
+
+      // 监听鼠标点击事件
+      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+      handler.setInputAction((movement) => {
+        this.pickPosition(movement.position);
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     });
   },
-  methods: {},
+  methods: {
+    // 添加所有标记点
+    addMarkers() {
+      this.markerList.forEach(marker => {
+        this.addCustomPoint(marker);
+      });
+    },
+
+    // 添加单个标记点
+    addCustomPoint(pointInfo) {
+      const position = Cesium.Cartesian3.fromDegrees(
+        pointInfo.longitude * 1,
+        pointInfo.latitude * 1,
+        pointInfo.height * 1
+      );
+
+      // 创建描述信息HTML
+      let des = '<table class="cesium-infoBox-defaultTable"><tbody>';
+      Object.keys(pointInfo.des).forEach(key => {
+        des += `<tr><th>${key}</th><td>${pointInfo.des[key]}</td></tr>`;
+      });
+      des += '</tbody></table>';
+
+      // 添加实体
+      const entity = this.viewer.entities.add({
+        position: position,
+        billboard: {
+          // image: Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png'),
+          image: '/img/location.png',
+          width: 26,
+          height: 26,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0),
+          disableDepthTestDistance:15,
+          // disableDepthTestDistance: Number.POSITIVE_INFINITY
+        },
+        label: {
+          text: pointInfo.des.name || '监测点',
+          font: '14px Microsoft YaHei',
+          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+          outlineWidth: 2,
+          verticalOrigin: Cesium.VerticalOrigin.TOP,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0),
+          pixelOffset: new Cesium.Cartesian2(0, -60)
+        },
+        name: pointInfo.des.name || '建筑物信息',
+        description: des
+      });
+
+      console.log('添加标记点:', pointInfo.des.name);
+    },
+
+    // 拾取坐标点
+    pickPosition(position) {
+      const scene = this.viewer.scene;
+      const ray = this.viewer.camera.getPickRay(position);
+      const cartesian = scene.globe.pick(ray, scene);
+
+      if (Cesium.defined(cartesian)) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        const height = cartographic.height;
+
+        console.log(`拾取的坐标点：经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`);
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.viewer) {
+      this.viewer.destroy();
+    }
+  }
 };
 </script>