常规上传

src/components/modelUnpack.vue

@@ -3,20 +3,20 @@
   <div class="modelBox">
     <div ref="threeCanvas" style="width: 100%; height: 100%"></div>
     <div class="bjSelectBox">
-        <el-select
-          v-model="bj"
-          placeholder="完整展示"
-          style="width: 300px"
-          clearable
-          @change="bjChange"
-        >
-          <el-option
-            v-for="item in bjList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.uuid"
-          />
-        </el-select>
+      <el-select
+        v-model="bj"
+        placeholder="完整展示"
+        style="width: 300px"
+        clearable
+        @change="bjChange"
+      >
+        <el-option
+          v-for="item in bjList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.uuid"
+        />
+      </el-select>
     </div>
   </div>
 </template>
@@ -68,8 +68,21 @@ THREE.Cache.enabled = true;
 export default {
   name: "ThreeScene",
 
+  props: {
+    modelUnpackType: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+
   data() {
     return {
+      modelUnpackMap: {
+        fengji: "fengji",
+        guangfu: "guangfu",
+      },
       ThreeEngine: null,
       scene: null,
       camera: null,
@@ -247,7 +260,7 @@ export default {
           options?.dom?.appendChild(warning);
         }
 
-        this.addModel({ fileName: "fengji" });
+        this.addModel({ fileName: this.modelUnpackMap[this.modelUnpackType] });
       });
     },
 

src/views/cesium.vue

@@ -136,7 +136,10 @@
       <el-tab-pane label="视频监控" name="spjk">视频监控</el-tab-pane>
       <el-tab-pane label="故障查看" name="gzck">故障查看</el-tab-pane>
       <el-tab-pane label="模型解构" name="mxjg">
-        <ModelUnpack v-if="showFjDialogActiveName === 'mxjg'" />
+        <ModelUnpack
+          :modelUnpackType="modelUnpackType"
+          v-if="showFjDialogActiveName === 'mxjg'"
+        />
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
@@ -155,6 +158,7 @@ import windLineJson from "../assets/geoJson/windLine_2017121300.json";
 import axios from "axios";
 
 import ModelUnpack from "@/components/modelUnpack.vue";
+
 export default {
   name: "CesiumMap",
 
@@ -165,6 +169,7 @@ export default {
   data() {
     return {
       showFjDialog: false,
+      modelUnpackType: "fengji",
       showFjDialogActiveName: "jcxx",
       checkMode: false, // 调试模式
       allyShow: false,
@@ -298,39 +303,35 @@ export default {
       // 隐藏 Cesium Logo
       viewer.cesiumWidget.creditContainer.style.display = "none";
 
+      // 替换默认光源
+      this.viewer.scene.light = directionalLight;
+
       this.viewer = viewer;
 
       this.setMapImageryProvider();
       this.initGeoJsonData();
-
-      // 添加一些3D模型
-      this.addModel(
-        "./static/model/fengjiduli/model.glb",
-        "风机",
-        106.169866,
-        38.46637
-      );
     },
 
-    addModel(uri, name, lon, lat) {
-      const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
-      const position = Cesium.Cartesian3.fromDegrees(lon, lat);
-      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
-        position,
-        hpRoll
-      );
-      this.viewer.entities.add({
-        name, // 模型名称
-        position, // 模型位置
-        orientation, // 模型朝向
-        model: {
-          uri,
-          scale: 100.0,
-          // 模型贴地
-          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        },
-      });
-    },
+    // 废弃
+    // addModel(uri, name, lon, lat) {
+    //   const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
+    //   const position = Cesium.Cartesian3.fromDegrees(lon, lat);
+    //   const orientation = Cesium.Transforms.headingPitchRollQuaternion(
+    //     position,
+    //     hpRoll
+    //   );
+    //   this.viewer.entities.add({
+    //     name, // 模型名称
+    //     position, // 模型位置
+    //     orientation, // 模型朝向
+    //     model: {
+    //       uri,
+    //       scale: 100.0,
+    //       // 模型贴地
+    //       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+    //     },
+    //   });
+    // },
 
     // 初始化Cesium内部鼠标事件
     initEventInputAction() {
@@ -777,17 +778,28 @@ export default {
       // 设置初始视图为宁夏
       const that = this;
       this.viewer.camera.flyTo({
+        // destination: Cesium.Cartesian3.fromDegrees(
+        //   106.169866,
+        //   38.46637,
+        //   height || 8000000
+        // ),
+        // orientation: {
+        //   heading: Cesium.Math.toRadians(0),
+        //   pitch: Cesium.Math.toRadians(-90),
+        //   roll: 0.0,
+        // },
+        // duration: 1.0,
         destination: Cesium.Cartesian3.fromDegrees(
-          106.169866,
-          38.46637,
-          height || 8000000
+          106.712885,
+          37.413269,
+          height || 8000
         ),
         orientation: {
-          heading: Cesium.Math.toRadians(0),
-          pitch: Cesium.Math.toRadians(-90),
-          roll: 0.0,
+          heading: 0.9,
+          pitch: -0.5,
+          roll: 0,
         },
-        duration: 1.0,
+        duration: 3,
         complete() {
           // 为什么要加这个？因为破库地球没完全加载完成时如果执行了监听鼠标滑动事件会光速报错滑跪
           if (!that.loadDone) {