PC端适配，分层展示更改

public/static/config/config.js

@@ -43,87 +43,69 @@ var systemConfig = {
   msaaSamples: 0,
   // 以浏览器建议的分辨率渲染
   useBrowserRecommendedResolution: true,
-  // tdt_tk: "e90d56e5a09d1767899ad45846b0cefd", //'51a3c33c0ec351619c33a24461c0ba95',
   dataUrl: "",
   gltfConfig: "",
   tilesConfig: null,
   androidConfig: {
-    // dataUrl: "http://122.228.13.28:1009/3DTiles/qp/QPXZFWZX/JJ/android/", 
-    dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
     gltfConfig: "gltf",
     tilesConfig: {
       "DM": {
         name: "地面",
-        
         dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
-        // light: 1,
         yanchi: 100,
       },
       "sy": {
         name: "室外",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/android/",
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
         yanchi: 100,
       },
       "WQ": {
         name: "围栏",
         dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
-        // light: 20,
         yanchi: 1000,
       },
       "1c": {
         name: "一层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/android/",
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
         yanchi: 500,
       },
       "2c": {
         name: "二层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/android/",
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
         yanchi: 500,
       },
       "3c": {
         name: "三层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/android/",
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/android/",
       }
     },
   },
   iosConfig: {
-    // dataUrl: "http://122.228.13.28:1009/3DTiles/qp/QPXZFWZX/JJ/ios/",
-    dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/",
     gltfConfig: "gltf",
     tilesConfig: {
       "DM": {
         name: "地面",
         dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
-        // light: 1,
       },
 	  "sy": {
         name: "室外",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/ios/"
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
       },
       "WQ": {
         name: "围栏",
         dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
-        // light: 20,
       },
       "1c": {
         name: "一层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/ios/"
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
       },
       "2c": {
         name: "二层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/ios/"
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
       },
       "3c": {
         name: "三层",
-        dataUrl: "http://139.159.0.174:9002/model_data/QPXZFUZX/FWZX-obg/output/ios/"
-        // light: 20,
+        dataUrl: "http://szlszxdt.qpservice.org.cn:80/ios/"
       }
     },
   },

public/static/config/config2.js

@@ -532,7 +532,7 @@ systemConfig.pointInfo = {
                     sceneType: 0,
                     lon: 121.121997849742,
                     lat: 31.154629385692118,
-                    h: 28.81454562740586,
+                    h: 15.81454562740586,
                     heading: 132.38313892665334,
                     pitch: 0,
                     roll: 0
@@ -935,6 +935,7 @@ systemConfig.pointInfo = {
                 lon: 121.12262161165764, lat: 31.153863894518433, h: 1.6564816567440755
             },
             url: "https://yue.sh.gov.cn/#/location",
+            pc_url:"https://yue.sh.gov.cn/pc/serviceCenter.html?placeId=2c90fdc973d65a020173d73a03cd0002&organType=%25E5%258C%25BA%25E7%25BA%25A7%25E8%25A1%258C%25E6%2594%25BF%25E6%259C%258D%25E5%258A%25A1%25E4%25B8%25AD%25E5%25BF%2583&from=null",
             text: []
         },
         {
@@ -1259,7 +1260,7 @@ systemConfig.scene = [
                 camera: {
                     lon: 121.121997849742,
                     lat: 31.154629385692118,
-                    h: 28.81454562740586,
+                    h: 15.81454562740586,
                     heading: 132.38313892665334,
                     pitch: 0,
                     roll: 0
@@ -1401,7 +1402,7 @@ systemConfig.scene = [
                 camera: {
                     lon: 121.12273108086876,
                     lat: 31.1537502405301,
-                    h: 10.1058163275613,
+                    h: 9.1058163275613,
                     heading: 167.980897194697,
                     pitch: 0,
                     roll: 0
@@ -1511,15 +1512,15 @@ systemConfig.positionPoint = [
     { viewH: 5.8, h: 4.25, lon: 2.1139869314005244, lat: 0.5437348194898166, areaName: "便民服务区" },
     { viewH: 5.8, h: 4.25, lon: 2.1139870319611660, lat: 0.5437343966009698, areaName: "便民服务区" },
     { viewH: 5.8, h: 4.25, lon: 2.1139871334493243, lat: 0.5437339709295752, areaName: "便民服务区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139872061771996, lat: 0.5437336651436213, areaName: "一网通办帮待办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139872061771996, lat: 0.5437336651436213, areaName: "一网通办帮代办区" },
     { viewH: 5.8, h: 4.25, lon: 2.1139867071664744, lat: 0.5437335919118599, areaName: "二层楼梯" },
     { viewH: 5.8, h: 4.25, lon: 2.1139862576137816, lat: 0.5437334994114138, areaName: "二层楼梯" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139876964676647, lat: 0.5437337577834976, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139883850498520, lat: 0.5437338711146751, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139890066338580, lat: 0.5437339762258148, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139896415419560, lat: 0.5437340941353813, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139902663037686, lat: 0.5437342032927146, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139907235615220, lat: 0.5437342727705597, areaName: "一网通办帮待办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139876964676647, lat: 0.5437337577834976, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139883850498520, lat: 0.5437338711146751, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139890066338580, lat: 0.5437339762258148, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139896415419560, lat: 0.5437340941353813, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139902663037686, lat: 0.5437342032927146, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139907235615220, lat: 0.5437342727705597, areaName: "一网通办帮代办区" },
     { viewH: 5.8, h: 4.25, lon: 2.1139905455097177, lat: 0.5437347530162522, areaName: "审批审查中心" },
     { viewH: 5.8, h: 4.25, lon: 2.1139904515517600, lat: 0.5437351512957993, areaName: "审批审查中心" },
     { viewH: 5.8, h: 4.25, lon: 2.1139903519597210, lat: 0.5437355578358412, areaName: "审批审查中心" },
@@ -1528,27 +1529,27 @@ systemConfig.positionPoint = [
     { viewH: 5.8, h: 4.25, lon: 2.1139900687108426, lat: 0.5437367987038331, areaName: "审批审查中心" },
     { viewH: 5.8, h: 4.25, lon: 2.1139912795815760, lat: 0.5437343828501292, areaName: "茶水间" },
     { viewH: 5.8, h: 4.25, lon: 2.1139920607380890, lat: 0.5437345318121088, areaName: "茶水间" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139908150168570, lat: 0.5437337180432629, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139899248125930, lat: 0.5437335782539725, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139890758086723, lat: 0.5437334525615712, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139878533260936, lat: 0.5437332240487723, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139870174769570, lat: 0.5437330761988417, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139872038875760, lat: 0.5437323607139577, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139880251514100, lat: 0.5437325025517298, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139892838786470, lat: 0.5437327130175189, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139901158905470, lat: 0.5437328807784909, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139910416218100, lat: 0.5437330580928115, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139912096035913, lat: 0.5437324790135349, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139903113535540, lat: 0.5437323377307866, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139894745818553, lat: 0.5437321759026399, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139886606742210, lat: 0.5437320041819627, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139877937728670, lat: 0.5437318510010283, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139877157871445, lat: 0.5437313881991688, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139885593260120, lat: 0.5437314989936430, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139892857698780, lat: 0.5437316418979740, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139900095529030, lat: 0.5437317877213971, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139908278835184, lat: 0.5437319220656716, areaName: "一网通办帮待办区" },
-    { viewH: 5.8, h: 4.25, lon: 2.1139915083592657, lat: 0.5437322179206618, areaName: "一网通办帮待办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139908150168570, lat: 0.5437337180432629, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139899248125930, lat: 0.5437335782539725, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139890758086723, lat: 0.5437334525615712, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139878533260936, lat: 0.5437332240487723, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139870174769570, lat: 0.5437330761988417, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139872038875760, lat: 0.5437323607139577, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139880251514100, lat: 0.5437325025517298, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139892838786470, lat: 0.5437327130175189, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139901158905470, lat: 0.5437328807784909, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139910416218100, lat: 0.5437330580928115, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139912096035913, lat: 0.5437324790135349, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139903113535540, lat: 0.5437323377307866, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139894745818553, lat: 0.5437321759026399, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139886606742210, lat: 0.5437320041819627, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139877937728670, lat: 0.5437318510010283, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139877157871445, lat: 0.5437313881991688, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139885593260120, lat: 0.5437314989936430, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139892857698780, lat: 0.5437316418979740, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139900095529030, lat: 0.5437317877213971, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139908278835184, lat: 0.5437319220656716, areaName: "一网通办帮代办区" },
+    { viewH: 5.8, h: 4.25, lon: 2.1139915083592657, lat: 0.5437322179206618, areaName: "一网通办帮代办区" },
 
     { viewH: 9.53, h: 7.98, lon: 2.1139899844111520, lat: 0.5437376647201297, areaName: "三层楼梯" },
     { viewH: 9.53, h: 7.98, lon: 2.1139900662153350, lat: 0.5437371562319632, areaName: "三层楼梯" },

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="main">
-    <Home></Home> 
+    <Home2 v-if="IsPC"></Home2>
+    <Home v-else></Home>
   </div>
 </template>
 
@@ -8,17 +9,20 @@
 import { defineAsyncComponent } from "vue";
 export default {
   components: {
-    Home: defineAsyncComponent(() => import("@/views/Home.vue")), 
+    Home: defineAsyncComponent(() => import("@/views/Home.vue")),
+    Home2: defineAsyncComponent(() => import("@/views/Home2.vue")),
   },
   data() {
     return {
       os: "Android",
+      IsPC: false,
     };
   },
   created() {
     console.log(Cesium.VERSION);
     // 获取当前操作系统
     console.log(navigator.userAgent);
+
     // // 判断手机横竖屏状态：
     // window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
     //   if (window.orientation === 180 || window.orientation === 0) {
@@ -30,6 +34,9 @@ export default {
     //     $(".codeIg_s").addClass('vercreen');//添加横屏样式
     //   }
     // }, false);
+
+    this.IsPC = this.IsPCFun(); // true为PC端，false为手机端
+    this.$store.state.IsPC = this.IsPC; 
     if (
       navigator.userAgent.indexOf("Android") > -1 ||
       navigator.userAgent.indexOf("Linux") > -1
@@ -55,6 +62,33 @@ export default {
       systemConfig.tilesConfig = systemConfig.androidConfig.tilesConfig;
     }
   },
+
+  methods: {
+    IsPCFun() {
+      var userAgentInfo = navigator.userAgent;
+
+      var Agents = [
+        "Android",
+        "iPhone",
+        "SymbianOS",
+        "Windows Phone",
+        "iPad",
+        "iPod",
+      ];
+
+      var flagPc = true;
+
+      for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+          flagPc = false;
+
+          break;
+        }
+      }
+
+      return flagPc;
+    },
+  },
 };
 </script>
 
@@ -92,12 +126,13 @@ body {
 }
 
 .van-collapse-item--border:after {
-  border-top: 0px!important;
+  border-top: 0px !important;
 }
-.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after{
-  border-width: 0 0!important;
+.van-hairline--top-bottom:after,
+.van-hairline-unset--top-bottom:after {
+  border-width: 0 0 !important;
 }
-.van-collapse-item__title--expanded:after{
-  display: none!important;
+.van-collapse-item__title--expanded:after {
+  display: none !important;
 }
 </style>

src/components/LTool.vue

@@ -42,44 +42,44 @@ export default {
     onChange(index) {
       switch (index) {
         case 0: // 全部
-          if (globalVariable.tilesArr["SW"] != undefined)
-            globalVariable.tilesArr["SW"].show = true;
-          if (globalVariable.tilesArr["3C"] != undefined)
-            globalVariable.tilesArr["3C"].show = true;
-          if (globalVariable.tilesArr["2C"] != undefined)
-            globalVariable.tilesArr["2C"].show = true;
-          if (globalVariable.tilesArr["1C"] != undefined)
-            globalVariable.tilesArr["1C"].show = true;
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = true;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = true;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
           break;
         case 1: // 三层
-          if (globalVariable.tilesArr["SW"] != undefined)
-            globalVariable.tilesArr["SW"].show = false;
-          if (globalVariable.tilesArr["3C"] != undefined)
-            globalVariable.tilesArr["3C"].show = true;
-          if (globalVariable.tilesArr["2C"] != undefined)
-            globalVariable.tilesArr["2C"].show = true;
-          if (globalVariable.tilesArr["1C"] != undefined)
-            globalVariable.tilesArr["1C"].show = true;
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = true;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
           break;
         case 2: // 二层
-          if (globalVariable.tilesArr["SW"] != undefined)
-            globalVariable.tilesArr["SW"].show = false;
-          if (globalVariable.tilesArr["3C"] != undefined)
-            globalVariable.tilesArr["3C"].show = false;
-          if (globalVariable.tilesArr["2C"] != undefined)
-            globalVariable.tilesArr["2C"].show = true;
-          if (globalVariable.tilesArr["1C"] != undefined)
-            globalVariable.tilesArr["1C"].show = true;
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = false;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
           break;
         case 3: // 一层
-          if (globalVariable.tilesArr["SW"] != undefined)
-            globalVariable.tilesArr["SW"].show = false;
-          if (globalVariable.tilesArr["3C"] != undefined)
-            globalVariable.tilesArr["3C"].show = false;
-          if (globalVariable.tilesArr["2C"] != undefined)
-            globalVariable.tilesArr["2C"].show = false;
-          if (globalVariable.tilesArr["1C"] != undefined)
-            globalVariable.tilesArr["1C"].show = true;
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = false;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = false;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
           break;
         default:
           break;

src/components2/GamePad.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="gamepad">
+    <div
+      class="rightHandle"
+      :style="{
+        height: padH + 'px',
+        width: padW + 'px',
+        bottom: '0px',
+        left: shiftingR + 'px',
+      }"
+    >
+      <div class="control">
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="up"
+            @touchstart="
+              startEventHandle({
+                moveForward: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="left"
+            @touchstart="
+              startEventHandle({
+                moveLeft: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+          <div class="name"></div>
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="right"
+            @touchstart="
+              startEventHandle({
+                moveRight: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="down"
+            @touchstart="
+              startEventHandle({
+                moveBackward: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="leftHandle"
+      :style="{
+        height: padH + 'px',
+        width: padW + 'px',
+        bottom: '0px',
+        display: 'none',
+      }"
+    >
+      <div class="control">
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="up"
+            @touchstart="
+              startEventHandle({
+                moveUp: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="left"
+            @touchstart="
+              startEventHandle({
+                lookLeft: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+          <div class="name"></div>
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="right"
+            @touchstart="
+              startEventHandle({
+                lookRight: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+        <div class="row">
+          <div
+            unselectable="on"
+            onselectstart="return false;"
+            class="down"
+            @touchstart="
+              startEventHandle({
+                moveDown: true,
+              })
+            "
+            @touchend="endEventHandle"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      padH: 0,
+      padW: 0,
+      interval: null,
+      shiftingR: null,
+    };
+  },
+  mounted() {
+    this.resetSize();
+    window.onresize = () => {
+      return (() => {
+        this.$nextTick(() => {
+          this.resetSize();
+        });
+      })();
+    };
+  },
+  methods: {
+    resetSize() {
+      // // 页面可视高度
+      // let pageInnerHeight = window.innerHeight; // 搜索框高度
+      // let divOffsetHeight =
+      //   document.getElementsByClassName("divStyle")[0].offsetHeight;
+      // console.log(pageInnerHeight, divOffsetHeight);
+      let beishu = 3;
+      if (window.innerWidth > window.innerHeight) {
+        this.padH = window.innerHeight / beishu;
+        this.padW = window.innerHeight / beishu;
+      } else {
+        this.padH = window.innerWidth / beishu;
+        this.padW = window.innerWidth / beishu;
+      }
+      this.shiftingR = window.innerWidth / 3;
+    },
+
+    startEventHandle(flags) {
+      let that = this;
+      this.keyboardMapRoamingRender(flags);
+      this.interval = setInterval(() => {
+        that.keyboardMapRoamingRender(flags);
+      }, 1);
+    },
+    endEventHandle() {
+      clearInterval(this.interval);
+      this.interval = null;
+    },
+
+    keyboardMapRoamingRender(flags) {
+      let camera = globalVariable.viewer.camera;
+      let ellipsoid = globalVariable.viewer.scene.globe.ellipsoid;
+      let cameraHeight = ellipsoid.cartesianToCartographic(
+        camera.position
+      ).height;
+
+      // 根据相机高度设置移动距离，比默认距离移动效果更好
+      let moveRate = cameraHeight / 20.0;
+
+      if (flags.moveForward) {
+        camera.moveForward(moveRate);
+      }
+      if (flags.moveBackward) {
+        camera.moveBackward(moveRate);
+      }
+      if (flags.moveLeft) {
+        camera.moveLeft(moveRate);
+      }
+      if (flags.moveRight) {
+        camera.moveRight(moveRate);
+      }
+      if (flags.moveUp) {
+        camera.moveUp(moveRate);
+      }
+      if (flags.moveDown) {
+        camera.moveDown(moveRate);
+      }
+      if (flags.lookUp) {
+        camera.lookUp();
+      }
+      if (flags.lookDown) {
+        camera.lookDown();
+      }
+      if (flags.lookLeft) {
+        camera.lookLeft();
+      }
+      if (flags.lookRight) {
+        camera.lookRight();
+      }
+      if (flags.twistLeft) {
+        camera.twistLeft();
+      }
+      if (flags.twistRight) {
+        camera.twistRight();
+      }
+      // 根据相机高度设置缩放参数
+      if (flags.zoomIn) {
+        camera.zoomIn(0.2);
+        // camera.zoomIn(cameraHeight / 2);
+      }
+      if (flags.zoomOut) {
+        camera.zoomOut(0.2);
+        // camera.zoomOut(cameraHeight / 2);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gamepad {
+  width: 100%;
+  height: 0px;
+  position: relative;
+  bottom: 0px;
+  .rightHandle,
+  .leftHandle {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .leftHandle,
+  .rightHandle {
+    position: absolute;
+    background: url(~@/assets/img/controlPanel/caozuo_panel.png) center
+      center/100% 100% no-repeat;
+  }
+  // .leftHandle {
+  //   left: 0px;
+  // }
+  // .rightHandle {
+  //   right: 0px;
+  // }
+  .control {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    .row {
+      width: 100%;
+      height: calc(100% / 3);
+      div {
+        width: calc(100% / 3);
+        height: 100%;
+        cursor: pointer;
+      }
+    }
+    .row {
+      position: relative;
+      .up,
+      .down,
+      .name {
+        margin: 0 auto;
+      }
+      .left {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .right {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+  .rightHandle {
+    .up {
+      background: url(~@/assets/img/controlPanel/moveForward.png) center
+        center/100% 100% no-repeat;
+    }
+    .left {
+      background: url(~@/assets/img/controlPanel/moveLeft.png) center
+        center/100% 100% no-repeat;
+    }
+    .right {
+      background: url(~@/assets/img/controlPanel/moveRight.png) center
+        center/100% 100% no-repeat;
+    }
+    .down {
+      background: url(~@/assets/img/controlPanel/moveBackward.png) center
+        center/100% 100% no-repeat;
+    }
+  }
+
+  .leftHandle {
+    .up {
+      background: url(~@/assets/img/controlPanel/moveUp.png) center center/100%
+        100% no-repeat;
+    }
+    .left {
+      background: url(~@/assets/img/controlPanel/lookLeft.png) center
+        center/100% 100% no-repeat;
+    }
+    .right {
+      background: url(~@/assets/img/controlPanel/lookRight.png) center
+        center/100% 100% no-repeat;
+    }
+    .down {
+      background: url(~@/assets/img/controlPanel/moveDown.png) center
+        center/100% 100% no-repeat;
+    }
+  }
+}
+</style>

src/components2/LTool.vue

@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="leftpanel"
+    v-show="$store.state.fenceng"
+  > 
+    <div class="container">
+      <div class="slider_container">
+        <van-slider
+          v-model="value"
+          max="3"
+          min="0"
+          active-color="#e5e5e5"
+          inactive-color="#e5e5e5"
+          vertical
+          @update:model-value="onChange"
+        />
+        <!-- active-color="#e5e5e5" 1989fa -->
+      </div>
+
+      <div class="description">
+        <div
+          :class="{ active: value == 0 }"
+          @click="clickChange(0)"
+        >室外</div>
+        <div
+          :class="{ active: value == 1 }"
+          @click="clickChange(1)"
+        >三层</div>
+        <div
+          :class="{ active: value == 2 }"
+          @click="clickChange(2)"
+        >二层</div>
+        <div
+          :class="{ active: value == 3 }"
+          @click="clickChange(3)"
+        >一层</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { useStore } from "vuex";
+export default {
+  data() {
+    return {
+      value: 0,
+    };
+  },
+  mounted() {
+    // const store = useStore();
+    // this.show = this.$store.state.fenceng;
+    window.closeHull = this.closeHull;
+    window.returnDefault = this.returnDefault;
+  },
+  methods: {
+    onChange(index) {
+      switch (index) {
+        case 0: // 全部
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = true;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = true;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
+          break;
+        case 1: // 三层
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = true;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
+          break;
+        case 2: // 二层
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = false;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = true;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
+          break;
+        case 3: // 一层
+          if (globalVariable.tilesArr["sy"] != undefined)
+            globalVariable.tilesArr["sy"].show = false;
+          if (globalVariable.tilesArr["3c"] != undefined)
+            globalVariable.tilesArr["3c"].show = false;
+          if (globalVariable.tilesArr["2c"] != undefined)
+            globalVariable.tilesArr["2c"].show = false;
+          if (globalVariable.tilesArr["1c"] != undefined)
+            globalVariable.tilesArr["1c"].show = true;
+          break;
+        default:
+          break;
+      }
+    },
+    clickChange(index) {
+      this.value = index;
+      this.onChange(index);
+    },
+    closeHull(index) {
+      return;
+      let value = 0;
+      switch (index) {
+        case 0:
+          value = 0;
+          break;
+        case 1:
+          value = 3;
+          break;
+        case 2:
+          value = 2;
+          break;
+        case 3:
+          value = 1;
+        default:
+          break;
+      }
+      this.value = value;
+      this.onChange(value);
+    },
+    returnDefault() {
+      this.value = 0;
+      this.onChange(0);
+    },
+  },
+  computed: {
+    show() {
+      return this.$store.state.fenceng;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.leftpanel {
+  position: absolute;
+  z-index: 0;
+  left: 0px;
+  top: 20.75px;
+  width: 70px;
+  height: 92px;
+  font-size: 20px;
+  padding-left: 16px;
+  padding-right: 12px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-radius: 8px;
+  .container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .slider_container {
+      height: 100%;
+      padding: 12px 0px;
+      box-sizing: border-box;
+    }
+    .description {
+      position: absolute;
+      top: 0px;
+      left: 4.15px;
+      padding-left: 10px;
+      // &:active {
+      // }
+      height: 100%;
+      div {
+        width: 46.5px; // 62
+        height: 24px; // 32
+        line-height: 24px;
+        color: #000000;
+        text-align: center;
+        font-weight: bold;
+        font-size: 10px;
+        background: url(~@/assets/img/tool/floor.png) center center/100% 100%
+          no-repeat;
+        cursor: pointer;
+        &.active {
+          background: url(~@/assets/img/tool/floor_active.png) center
+            center/100% 100% no-repeat;
+        }
+        &:nth-child(1) {
+          margin-top: -4px;
+        }
+        &:nth-child(2) {
+          margin-top: 0px;
+        }
+        &:nth-child(3) {
+          margin-top: 0px;
+        }
+        &:nth-child(4) {
+          margin-top: 0px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components2/MainMap.vue

@@ -0,0 +1,867 @@
+<template>
+  <div class="container">
+    <div id="cesiumContainer">
+      <!-- <div class="get_now_camera_view">
+      <van-button @click="consoleCameraPosition"> 当前视角 </van-button>
+      <van-button @click="setViewDefaultlocation"> 复位 </van-button>
+    </div>
+    <van-popup
+      v-model:show="dialogVisible"
+      :style="{ height: '50%', width: '80%' }"
+      :closed="hideInfoDailog"
+    >
+      <div>
+        <div style="font-size: 16px">{{ dialogInfoStr }}</div>
+        <van-button @click="hideInfoDailog">关 闭</van-button>
+        <van-button :class="'copy_info_dialog'" type="primary">
+          复 制
+        </van-button>
+      </div>
+    </van-popup> -->
+    </div>
+  </div>
+
+  <Tool></Tool>
+</template>
+
+<script>
+// import Clipboard from "clipboard";
+import { defineAsyncComponent } from "vue";
+import Water from "@/utils/Water";
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogInfoStr: "",
+      clipboard: null,
+      correctCamera: false,
+      waterObj: null, // 水面实例
+      flylineObj: [], // 飞线数组
+      topK: [
+        {
+          lon: 121.12265818599361,
+          lat: 31.153907327111906,
+          h: 12.178229477117695,
+        },
+        {
+          lon: 121.12264787421734,
+          lat: 31.15395149031556,
+          h: 12.178192986180326,
+        },
+        {
+          lon: 121.12278546708409,
+          lat: 31.153975342725264,
+          h: 12.178415363887282,
+        },
+        {
+          lon: 121.12281310059657,
+          lat: 31.15385762853425,
+          h: 12.178399877503464,
+        },
+        {
+          lon: 121.1228576094918,
+          lat: 31.15386519051712,
+          h: 12.178394232107442,
+        },
+        {
+          lon: 121.1228909000206,
+          lat: 31.153723309251856,
+          h: 12.17857353611858,
+        },
+        {
+          lon: 121.12294578609598,
+          lat: 31.153732796983615,
+          h: 12.178675754028028,
+        },
+        {
+          lon: 121.12298033312791,
+          lat: 31.153585333373417,
+          h: 12.17876227737616,
+        },
+        {
+          lon: 121.1228480316718,
+          lat: 31.15356239349922,
+          h: 12.178326652099466,
+        },
+        {
+          lon: 121.12283863696666,
+          lat: 31.153602052352188,
+          h: 12.178301731797035,
+        },
+        {
+          lon: 121.12279132401528,
+          lat: 31.153593731079162,
+          h: 12.17821160134978,
+        },
+        {
+          lon: 121.12280904366847,
+          lat: 31.153517944755357,
+          h: 12.178387628978598,
+        },
+        {
+          lon: 121.12256003807408,
+          lat: 31.15347475524662,
+          h: 12.178108003497535,
+        },
+        {
+          lon: 121.12255140331416,
+          lat: 31.153510889388823,
+          h: 12.178086221333002,
+        },
+        {
+          lon: 121.12251427275822,
+          lat: 31.153504509859477,
+          h: 12.17756730102783,
+        },
+        { lon: 121.1224291079002, lat: 31.15386748647, h: 12.177529555001517 },
+      ],
+    };
+  },
+  components: {
+    Tool: defineAsyncComponent(() => import("@/components2/Tool.vue")),
+  },
+  created() {},
+  mounted() {
+    let that = this;
+    // this.clipboard = new Clipboard(".copy_info_dialog", {
+    //   // 点击copy按钮，直接通过text直接返回复印的内容
+    //   text: function () {
+    //     return that.dialogInfoStr;
+    //   },
+    // });
+    this.waterObj = new Water();
+    window.controlCZ = this.controlCZ;
+    this.$root.$.appContext.config.globalProperties.$flyTo = this.flyTo;
+    this.initViewer().then(() => {
+      this.mapConfig();
+      // 默认视角
+      this.setViewDefaultlocation().then(() => {
+        that.mainFunc();
+      });
+    });
+    window.getNowCameraPosition1 = this.getNowCameraPosition;
+    window.getNowCameraPosition = function () {
+      this.getNowCameraPosition().then((result) => {
+        this.showInfoDailog(result.info);
+      });
+    };
+
+    window.addImage = this.addImage;
+    window.changeImage = this.changeImage;
+    // window.tp =
+    // this.addImage(globalVariable.viewer, {
+    //   arr: [
+    //     121.12273519090121, 31.153826679130416, 3.280499471365055,
+    //     121.12273833983032, 31.153813096263634, 3.281036567079009,
+    //   ],
+    //   minH: [2.807028457880749, 2.807028457880749]
+    // }, '../static/images/ceshi.png');
+    // changeImage(tp,'../static/images/jinru.png')
+
+    // this.addImage(globalVariable.viewer, {
+    //   arr: [
+    //     121.12273884192843, 31.153811497621240, 3.2435919391164383,
+    //     121.12274206014264, 31.153797613000965, 3.2321212783392600,
+    //   ],
+    //   minH: [2.8569308025328994, 2.8529680784118310]
+    // }, '../static/images/ceshi.png');
+
+    return;
+  },
+
+  methods: {
+    consoleCameraPosition() {
+      this.getNowCameraPosition().then((result) => {
+        this.showInfoDailog(
+          JSON.stringify(result.result).replaceAll("{", "").replaceAll("}", "")
+        );
+      });
+    },
+
+    initViewer() {
+      return new Promise((resolve, reject) => {
+        globalVariable.viewer = new Cesium.Viewer("cesiumContainer", {
+          animation: false, // 是否创建动画小器件，左下角仪表
+          baseLayerPicker: false, // 是否显示图层选择器
+          fullscreenButton: false, // 是否显示全屏按钮
+          vrButton: false, // 是否创建VRButton小工具
+          geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
+          homeButton: false, // 是否显示Home按钮
+          infoBox: false, // 是否显示信息框
+          sceneModePicker: false, // 是否显示3D/2D选择器
+          selectionIndicator: false, // 是否显示选取指示器组件
+          timeline: false, // 是否显示时间轴
+          navigationHelpButton: false, // 是否显示右上角的帮助按钮
+          navigationInstructionsInitiallyVisible: false, // 如果导航指示最初应可见，则为True；如果用户明确单击按钮后才显示，则为false。
+          scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
+          shouldAnimate: false, // 默认情况下，如果时钟应尝试提前模拟时间，则为true，否则为false。此选项优先于设置
+          clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
+          clockViewModel: new Cesium.ClockViewModel(
+            new Cesium.Clock({
+              startTime: Cesium.JulianDate.fromIso8601("2023-03-14T22:30:14Z"),
+              currentTime: Cesium.JulianDate.fromIso8601(
+                "2023-03-14T22:31:14Z"
+              ),
+              stopTime: Cesium.JulianDate.fromIso8601("2023-03-15T10:19:14Z"),
+              clockRange: Cesium.ClockRange.LOOP_STOP,
+              clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
+            })
+          ), // 用于控制当前时间的时钟对象
+          selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
+          imageryProviderViewModels:
+            Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
+          selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
+          terrainProviderViewModels:
+            Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
+          imageryProvider: new Cesium.SingleTileImageryProvider({
+            url: (function createColorCanvas(color) {
+              // 返回空白
+              var width = 1,
+                height = 1;
+              var canvas = document.createElement("canvas");
+              canvas.width = width;
+              canvas.height = height;
+              var ctx = canvas.getContext("2d");
+              ctx.fillStyle = color;
+              ctx.fillRect(0, 0, width, height);
+              return canvas.toDataURL();
+            })("#ffffff00"),
+            rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+          }), // 图像图层提供者，仅baseLayerPicker设为false有意义
+          fullscreenElement: document.body, // 全屏时渲染的HTML元素,
+          useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
+          targetFrameRate: undefined, // 使用默认render loop时的帧率
+          showRenderLoopErrors: false, // 如果设为true，将在一个HTML面板中显示错误信息
+          automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
+          sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式
+          mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
+          dataSources: new Cesium.DataSourceCollection(), // 需要进行可视化的数据源的集合
+        });
+
+        if (systemConfig.msaaSamples != 0) {
+          globalVariable.viewer.scene.msaaSamples = systemConfig.msaaSamples;
+        }
+        //去除版权标记
+        globalVariable.viewer._cesiumWidget._creditContainer.style.display =
+          "none";
+        resolve();
+      });
+    },
+
+    mainFunc() {
+      let that = this;
+      // camera范围限制
+      this.bindLimitCameraFunc();
+
+      // // 取消滑动事件
+      // this.controlCZ(systemConfig.mapControl);
+
+      // 自定义滑动事件
+      this.wetherScroll(this.changeCamera);
+
+      window.bindLimitCameraFunc = this.bindLimitCameraFunc;
+      window.unbindLimitCameraFunc = this.unbindLimitCameraFunc;
+
+      // entity点击事件
+      this.entityClickEvent();
+      // // 键盘/地图点击事件
+      // this.singleClick(viewer); // 地图点击
+      this.singleClick2(); // 模型点击
+      keyboardMapRoamingInit(globalVariable.viewer);
+
+      let keyArr = Object.keys(systemConfig.tilesConfig);
+      this.yanchiAdd3DTiles(0, keyArr);
+
+      // for (let i = 0; i < keyArr.length; i++) {
+      //   const str = keyArr[i];
+      //   globalVariable.tilesArr[str] = this.add3DTilesData(
+      //     systemConfig.dataUrl + str + "/tileset.json", //
+      //     {
+      //       light: systemConfig.tilesConfig[str].light,
+      //     }
+      //   );
+      // }
+      window.changeImage = this.changeImage;
+      // 水面加载
+      setTimeout(() => {
+        that.addWaterPanel();
+      }, 10000);
+    },
+
+    yanchiAdd3DTiles(index, keyArr) {
+      let that = this;
+      if (index >= keyArr.length) return;
+      const str = keyArr[index];
+      globalVariable.tilesArr[str] = this.add3DTilesData(
+        systemConfig.tilesConfig[str].dataUrl + str + "/tileset.json" //
+        // {
+        //   light: systemConfig.tilesConfig[str].light,
+        // }
+      );
+      setTimeout(() => {
+        that.yanchiAdd3DTiles(++index, keyArr);
+      }, systemConfig.tilesConfig[str].yanchi);
+    },
+
+    // entity Click
+    entityClickEvent() {
+      let viewClickHandle = new Cesium.ScreenSpaceEventHandler(
+        globalVariable.viewer.scene.canvas
+      );
+      viewClickHandle.setInputAction(function (evt) {
+        var pickedObject = globalVariable.viewer.scene.pick(evt.position);
+        if (pickedObject && pickedObject.id) {
+          var clickMarkerId = pickedObject.id._id;
+          if (globalVariable.point_positions[clickMarkerId]) {
+            var data = globalVariable.point_positions[clickMarkerId];
+            if (data.callback) {
+              data.callback(data.infos);
+            }
+          }
+        } else {
+          return false;
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    changeCamera(direction) {
+      switch (direction) {
+        case "left":
+          globalVariable.viewer.camera.lookLeft((Math.PI / 180) * 2);
+          break;
+
+        case "right":
+          globalVariable.viewer.camera.lookRight((Math.PI / 180) * 2);
+          break;
+
+        default:
+          break;
+      }
+    },
+
+    wetherScroll(func) {
+      let startX = 0;
+      // let startY = 0;
+      let endX = 0;
+      // let endY = 0;
+      let distanceX = 0;
+      // let distanceY = 0;
+      let body = document.getElementById("cesiumContainer");
+      // var clientHeight = document.documentElement.clientHeight;
+      var clientWidth = document.documentElement.clientWidth;
+      body.addEventListener("touchstart", function (event) {
+        var touch = event.targetTouches[0];
+        //滑动起点的坐标
+        startX = touch.pageX;
+        // startY = touch.pageY;
+        // console.log("startX:"+startX+","+"startY:"+startY);
+      });
+      body.addEventListener("touchmove", function (event) {
+        var touch = event.targetTouches[0];
+        //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
+        endX = touch.pageX;
+        // endY = touch.pageY;
+        distanceX = endX - startX;
+        // distanceY = endY - startY;
+        if (startX != Math.abs(distanceX)) {
+          //在滑动的距离超过屏幕高度的20%时，做某种操作
+          if (Math.abs(distanceX) > clientWidth * 0.001) {
+            //向下滑实行函数someAction1，向上滑实行函数someAction2
+            //向左滑实行函数someAction1，向右滑实行函数someAction2
+            distanceX > 0 ? func("left") : func("right");
+            startX = endX;
+            // startY = endY;
+          }
+        }
+        // console.log("endX:"+endX+","+"endY:"+endY);
+      });
+      body.addEventListener("touchend", function (event) {
+        // distanceX = endX - startX;
+        // distanceY = endY - startY;
+        // // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
+        // //移动端设备的屏幕宽度
+        // var clientHeight = document.documentElement.clientHeight;
+        // // console.log(clientHeight;*0.2);
+        // //判断是否滑动了，而不是屏幕上单击了
+        // if (startY != Math.abs(distanceY)) {
+        //   //在滑动的距离超过屏幕高度的20%时，做某种操作
+        //   if (Math.abs(distanceY) > clientHeight * 0.2) {
+        //     //向下滑实行函数someAction1，向上滑实行函数someAction2
+        //     distanceY < 0 ? someAction1() : someAction2();
+        //   }
+        // }
+        startX = 0;
+        // startY = 0;
+        endX = 0;
+        // endY = 0;
+        distanceX = 0;
+        // distanceY = 0;
+      });
+    },
+
+    // 禁用/开启 操作
+    controlCZ(bool) {
+      globalVariable.viewer.scene.screenSpaceCameraController.enableLook = bool;
+      globalVariable.viewer.scene.screenSpaceCameraController.enableRotate =
+        bool;
+      globalVariable.viewer.scene.screenSpaceCameraController.enableTilt = bool;
+      globalVariable.viewer.scene.screenSpaceCameraController.enableTranslate =
+        bool;
+      globalVariable.viewer.scene.screenSpaceCameraController.enableZoom = bool;
+    },
+
+    // 默认定位
+    setViewDefaultlocation() {
+      return new Promise((resolve, reject) => {
+        this.$flyTo({
+          lon: systemConfig.mapDefault.center.lon,
+          lat: systemConfig.mapDefault.center.lat,
+          h: systemConfig.mapDefault.height,
+          heading: systemConfig.mapDefault.heading,
+          pitch: systemConfig.mapDefault.pitch,
+          roll: systemConfig.mapDefault.roll,
+          time: 1,
+          pitchAdjustHeight: 1000,
+          callback: null,
+        }).then(() => {
+          resolve();
+        });
+      });
+    },
+    flyTo(item) {
+      return new Promise((resolve, reject) => {
+        globalVariable.viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(
+            item.lon,
+            item.lat,
+            item.h
+          ),
+          orientation: {
+            heading: Cesium.Math.toRadians(item.heading), // 方向
+            pitch: Cesium.Math.toRadians(item.pitch), // 倾斜角度
+            roll: Cesium.Math.toRadians(item.roll),
+          },
+          duration: isNaN(item.time) ? 2 : item.time,
+          pitchAdjustHeight: item.pitchAdjustHeight || 1000,
+          complete: function () {
+            if (item) {
+              if (item.callback) item.callback(item);
+            }
+            resolve();
+          },
+        });
+      });
+    },
+
+    // cesium 球体配置
+    mapConfig() {
+      // 大气效果（发光）
+      globalVariable.viewer.scene.globe.showGroundAtmosphere = false;
+      // 是否将地球渲染为半透明的球体
+      globalVariable.viewer.scene.globe.translucency.enabled = true;
+      // 基础球体颜色
+      globalVariable.viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
+      // 地底颜色
+      globalVariable.viewer.scene.globe.undergroundColor = undefined;
+
+      // 开启场景光照
+      globalVariable.viewer.scene.globe.enableLighting = true;
+      // 控制太阳光
+      globalVariable.viewer.scene.sun.show = false // systemConfig.sunShow;
+      // 控制阴影
+      globalVariable.viewer.shadows = false // systemConfig.shadows;
+      // 阴影强度
+      globalVariable.viewer.shadowMap.darkness = systemConfig.shadowMapDarkness;
+
+      // globalVariable.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY;
+      // // globalVariable.viewer.shadowMap.softShadows  = truee
+      // globalVariable.viewer.shadowMap.darkness = 0.7; //阴影透明度--越大越透明
+      if (systemConfig.DirectionalLightShow) {
+        globalVariable.viewer.scene.light = new Cesium.DirectionalLight({
+          color: new Cesium.Color(
+            systemConfig.DirectionalLightColor.r,
+            systemConfig.DirectionalLightColor.g,
+            systemConfig.DirectionalLightColor.b,
+            systemConfig.DirectionalLightColor.a
+          ),
+          // //去除时间原因影响模型颜色
+          // direction: Cesium.Cartesian3.fromDegrees(
+          //   121.1217914833498,
+          //   31.154385387088624,
+          //   2000
+          // ),
+          direction: new Cesium.Cartesian3(
+            systemConfig.DirectionalLightDirection.x,
+            systemConfig.DirectionalLightDirection.y,
+            systemConfig.DirectionalLightDirection.z
+          ),
+          intensity: systemConfig.DirectionalLightIntensity,
+        });
+      }
+
+      // globalVariable.viewer._cesiumWidget._supportsImageRenderingPixelated =
+      //   Cesium.FeatureDetection.supportsImageRenderingPixelated();
+      // globalVariable.viewer._cesiumWidget._forceResize = true;
+
+      // 解决抗锯齿问题
+      // // 方法一
+      // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
+      //   //判断是否支持图像渲染像素化处理
+      //   var vtxf_dpr = window.devicePixelRatio;
+      //   // 适度降低分辨率
+      //   while (vtxf_dpr >= 2.0) {
+      //     vtxf_dpr /= 2.0;
+      //   }
+      //   //alert(dpr);
+      //   globalVariable.viewer.resolutionScale = vtxf_dpr;
+      // }
+      // 方法二
+      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
+        //判断是否支持图像渲染像素化处理
+        var vtxf_dpr = window.devicePixelRatio;
+        globalVariable.viewer.resolutionScale = vtxf_dpr;
+      }
+
+      // //是否开启抗锯齿
+      globalVariable.viewer.scene.fxaa = systemConfig.fxaa;
+      globalVariable.viewer.scene.postProcessStages.fxaa.enabled =
+        systemConfig.fxaaEnabled;
+
+      // // 天空盒隐藏
+      // globalVariable.viewer.scene.skyBox.show = false;
+      // 配置天空盒子
+      this.deploySkyBox();
+    },
+
+    // 限制camera的移动范围
+    bindLimitCameraFunc() {
+      globalVariable.viewer.camera.changed.addEventListener(
+        this.limitCameraFunc
+      );
+    },
+    unbindLimitCameraFunc() {
+      globalVariable.viewer.camera.changed.removeEventListener(
+        this.limitCameraFunc
+      );
+    },
+    limitCameraFunc() {
+      let that = this;
+      if (!this.correctCamera) {
+        this.getNowCameraPosition()
+          .then((result) => {
+            let cameraLon = result.result.lon;
+            let cameraLat = result.result.lat;
+            let cameraHeight = result.result.h;
+            if (
+              cameraLon > systemConfig.mapDefault.bbox.east ||
+              cameraLon < systemConfig.mapDefault.bbox.west ||
+              cameraLat > systemConfig.mapDefault.bbox.north ||
+              cameraLat < systemConfig.mapDefault.bbox.south ||
+              cameraHeight > systemConfig.mapDefault.defaultH
+            ) {
+              that.correctCamera = true;
+              that.setViewDefaultlocation().then(() => {
+                huifu();
+              });
+            }
+            cameraLon = null;
+            cameraLat = null;
+            cameraHeight = null;
+          })
+          .catch((err) => {});
+      }
+      function huifu() {
+        that.correctCamera = false;
+      }
+    },
+
+    // 配置天空盒
+    deploySkyBox() {
+      // 自定义的近地天空盒
+      let groundSkybox = new Cesium.GroundSkyBox({
+        sources: {
+          negativeX: "./static/images/skybox/Left.jpg",
+          negativeY: "./static/images/skybox/Front.jpg",
+          negativeZ: "./static/images/skybox/Down.jpg",
+
+          positiveX: "./static/images/skybox/Right.jpg",
+          positiveY: "./static/images/skybox/Back.jpg",
+          positiveZ: "./static/images/skybox/Up.jpg",
+        },
+      });
+
+      // // 自带的默认天空盒
+      // let defaultSkybox = viewer.scene.skyBox;
+
+      globalVariable.viewer.scene.skyBox = groundSkybox;
+      globalVariable.viewer.scene.skyAtmosphere.show = false;
+    },
+
+    // 获取当前camera的详细位置
+    getNowCameraPosition() {
+      return new Promise((resolve, reject) => {
+        var camera = globalVariable.viewer.camera;
+        var heading = Cesium.Math.toDegrees(
+          globalVariable.viewer.camera.heading
+        );
+        var pitch = Cesium.Math.toDegrees(globalVariable.viewer.camera.pitch); //Cesium.Math.toDegrees作用是把弧度转换成度数
+        var roll = Cesium.Math.toDegrees(globalVariable.viewer.camera.roll);
+        var h = globalVariable.viewer.camera.positionCartographic.height;
+        var camera = globalVariable.viewer.camera.position;
+        var position = Cesium.Cartographic.fromCartesian(camera);
+        var lon = Cesium.Math.toDegrees(position.longitude);
+        var lat = Cesium.Math.toDegrees(position.latitude);
+        resolve({
+          str: "",
+          result: {
+            lon: lon,
+            lat: lat,
+            h: h,
+            heading: heading,
+            pitch: pitch,
+            roll: roll,
+          },
+        });
+      });
+
+      // that.showInfoDailog(str);
+    },
+
+    // 地图（地球表面，无地形）左击事件
+    singleClick() {
+      var handler = new Cesium.ScreenSpaceEventHandler(
+        globalVariable.viewer.scene.canvas
+      );
+      handler.setInputAction(function (event) {
+        var earthPosition = globalVariable.viewer.camera.pickEllipsoid(
+          event.position,
+          globalVariable.viewer.scene.globe.ellipsoid
+        );
+        var cartographic = Cesium.Cartographic.fromCartesian(
+          earthPosition,
+          globalVariable.viewer.scene.globe.ellipsoid,
+          new Cesium.Cartographic()
+        );
+        var lat = Cesium.Math.toDegrees(cartographic.latitude);
+        var lng = Cesium.Math.toDegrees(cartographic.longitude);
+        var height = cartographic.height;
+        console.log(lng + "," + lat);
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 地图（模型上）左击事件
+    singleClick2() {
+      let that = this;
+      var handler = new Cesium.ScreenSpaceEventHandler(
+        globalVariable.viewer.scene.canvas
+      );
+      handler.setInputAction(function (event) {
+        var pick = globalVariable.viewer.scene.pickPosition(event.position);
+        var pickModel = globalVariable.viewer.scene.pick(event.position);
+        if (pickModel && pick && !pickModel.id) {
+          var height = Cesium.Cartographic.fromCartesian(pick).height;
+          var lat = Cesium.Math.toDegrees(
+            Cesium.Cartographic.fromCartesian(pick).latitude
+          );
+          var lon = Cesium.Math.toDegrees(
+            Cesium.Cartographic.fromCartesian(pick).longitude
+          );
+          // cartesian = Cesium.Cartesian3.fromDegrees(lng, lat, height);
+          // console.log("模型高度点", cartesian);
+          let str = `
+          lon:${lon}
+          lat:${lat}
+          height:${height}
+          `;
+          console.log(str);
+          that.showInfoDailog(
+            JSON.stringify({
+              lon: lon,
+              lat: lat,
+              h: height,
+            })
+              .replaceAll("{", "")
+              .replaceAll("}", "")
+          );
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 地图添加图片
+    addImage(viewer, pObj, imgUrl) {
+      // // 顺时针
+      // let pObj = {
+      //   arr: [
+      //     121.12273519090121, 31.153826679130416, 3.280499471365055,
+      //     121.12273833983032, 31.153813096263634, 3.281036567079009,
+      //   ],
+      //   minH: [2.807028457880749, 2.807028457880749]
+      // }
+      // let imgUrl = '../static/images/ceshi.png';
+
+      let material = Cesium.Material.fromType("Image");
+      material.uniforms.image = imgUrl;
+      function createPrimitive() {
+        let instance = new Cesium.GeometryInstance({
+          geometry: new Cesium.WallGeometry({
+            positions: Cesium.Cartesian3.fromDegreesArrayHeights(pObj.arr),
+            minimumHeights: pObj.minH,
+          }),
+        });
+        // 使用抽象的Primitive而不是RectanglePrimitive
+        let item = new Cesium.Primitive({
+          geometryInstances: instance,
+          appearance: new Cesium.MaterialAppearance({
+            material: material,
+            faceForward: true,
+          }),
+        });
+        return item;
+      }
+
+      let wallPrimitive = createPrimitive();
+      viewer.scene.primitives.add(wallPrimitive);
+      return wallPrimitive;
+    },
+
+    changeImage(primitiveObj, imgUrl) {
+      let material = Cesium.Material.fromType("Image");
+      material.uniforms.image = imgUrl;
+      primitiveObj.appearance = new Cesium.MaterialAppearance({
+        material: material,
+        faceForward: true,
+      });
+    },
+
+    showInfoDailog(str) {
+      this.dialogVisible = true;
+      this.dialogInfoStr = str;
+    },
+    hideInfoDailog() {
+      this.dialogVisible = false;
+    },
+
+    // 添加水面
+    addWaterPanel() {
+      let d = [];
+      for (let i = 0; i < systemConfig.water.length; i += 2) {
+        let x = systemConfig.water[i];
+        let y = systemConfig.water[i + 1];
+        d.push(x);
+        d.push(y);
+        d.push(1);
+      }
+
+      let geometry = new Cesium.PolygonGeometry({
+        polygonHierarchy: new Cesium.PolygonHierarchy(
+          Cesium.Cartesian3.fromRadiansArrayHeights(d)
+        ),
+        height: -2,
+      });
+
+      let waterFace = this.waterObj.create(geometry, {
+        // normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
+        frequency: 8000.0, // 控制波数的数字。
+        animationSpeed: 0.02, // 控制水的动画速度的数字。
+        amplitude: 5.0, // 控制水波振幅的数字。
+        specularIntensity: 0.8, // 控制镜面反射强度的数字。
+        baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
+        blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
+        // height: 100, //水面高度
+        clampToGround: true, //是否贴地
+        opacity: 0.7, //透明度
+      });
+      globalVariable.viewer.scene.primitives.add(waterFace);
+    },
+
+    // 加载3DTiles数据
+    add3DTilesData(url, options) {
+      if (!options) {
+        options = {
+          show: true,
+          // light: 1,
+          matrix: null,
+        };
+      } else {
+        options.show = typeof options.show == "boolean" ? options.show : true;
+        // options.light = isNaN(options.light) ? 1 : options.light;
+      }
+
+      let that = this;
+      let tileset = new Cesium.Cesium3DTileset({
+        url: url,
+        show: options.show,
+      });
+
+      globalVariable.viewer.scene.primitives.add(tileset);
+
+      tileset.readyPromise.then(function () {
+        if (options.matrix)
+          tileset.root.transform = that.createMatrix4(options.matrix);
+
+        tileset.style = {
+          color: {
+            conditions: [["true", "rgba(0, 0, 0, 0.3)"]],
+          },
+        };
+      });
+      return tileset;
+    },
+
+    // 创建偏移矩阵
+    createMatrix4(matrixParam, defaultModelMatrix) {
+      let tileModelTool = matrixParam;
+      var mx = Cesium.Matrix3.fromRotationX(
+        Cesium.Math.toRadians(tileModelTool.rx)
+      );
+      var my = Cesium.Matrix3.fromRotationY(
+        Cesium.Math.toRadians(tileModelTool.ry)
+      );
+      var mz = Cesium.Matrix3.fromRotationZ(
+        Cesium.Math.toRadians(tileModelTool.rz)
+      );
+      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
+      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
+      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
+      var m;
+      if (defaultModelMatrix) {
+        m = defaultModelMatrix;
+      } else {
+        //平移 修改经纬度
+        var position = Cesium.Cartesian3.fromDegrees(
+          tileModelTool.longitude,
+          tileModelTool.latitude,
+          tileModelTool.height
+        );
+        m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
+      }
+
+      //旋转、平移矩阵相乘
+      Cesium.Matrix4.multiply(m, rotationX, m);
+      Cesium.Matrix4.multiply(m, rotationY, m);
+      Cesium.Matrix4.multiply(m, rotationZ, m);
+      //缩放 修改缩放比例
+      var scale = Cesium.Matrix4.fromUniformScale(tileModelTool.scale);
+      Cesium.Matrix4.multiply(m, scale, m);
+      return m;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  #cesiumContainer {
+    width: 100%;
+    height: 100%;
+
+    .get_now_camera_view {
+      position: absolute;
+      z-index: 1;
+    }
+  }
+}
+</style>

src/components2/Scene.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="scene">
+    <div
+      class="scene_button"
+      :class="{ active: openStatus }"
+      @click="openSceneList"
+    ></div>
+    <div
+      class="scene_container animate__animated"
+      ref="scene_list"
+    >
+      <!-- v-show="sceneContainerShow" -->
+      <van-tabs
+        v-model="scene_index"
+        @change="tabChange"
+        :animated="true"
+      >
+        <van-tab
+          v-for="(item, index) in sceneData"
+          :key="index"
+          :title="item.name"
+          :name="index"
+        >
+          <div :class="[{ swiper: true }, 'mySwiper' + (index + 1)]">
+            <div class="swiper-wrapper">
+              <div
+                class="swiper-slide"
+                v-for="(slide, index_) in item.children"
+                :key="index_"
+                @click="jumpScene(slide)"
+                :class="{ active: slide.active }"
+              >
+                <img :src="slide.image" />
+                <span v-if="slide.name.length < 8">{{ slide.name }}</span>
+                <marquee
+                  v-else
+                  class="marquee"
+                  direction="left"
+                  scrollamount="1"
+                  behavior="scroll"
+                  scrolldelay="0"
+                  loop="loop"
+                >
+                  {{ slide.name }}
+                </marquee>
+              </div>
+              <div class="swiper-scrollbar"></div>
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    let sceneData = JSON.parse(JSON.stringify(systemConfig.scene));
+    sceneData = sceneData.map(function (item, firstIndex) {
+      if (firstIndex == 0) {
+        item.active = true;
+      } else {
+        item.active = false;
+      }
+      item.children = item.children.map(function (sce, secondIndex) {
+        sce.active = false;
+        return sce;
+      });
+      return item;
+    });
+    return {
+      scene_index: 0,
+      openStatus: true,
+      sceneContainerShow: true,
+      sceneData: sceneData,
+      swiper1: null,
+      swiper2: null,
+      swiper3: null,
+      swiper4: null,
+    };
+  },
+  // components: {
+  //   swiper,
+  //   swiperSlide,
+  // },
+  mounted() {
+    let that = this;
+    window.clearSceneActive = this.clearSceneActive;
+    setTimeout(() => {
+      that.tabTendered(that.scene_index);
+    }, 100);
+    window.addEventListener(
+      "onorientationchange" in window ? "orientationchange" : "resize",
+      function () {
+        that.tabTendered(that.scene_index);
+        // if(that.swiper1)that.swiper1.updateSize();
+        // if(that.swiper2)that.swiper2.updateSize();
+        // if(that.swiper3)that.swiper3.updateSize();
+        // if(that.swiper4)that.swiper4.updateSize();
+        // if (window.orientation === 180 || window.orientation === 0) {
+        //   console.log("竖屏");
+        //   // $(".codeIg_s").removeClass('vercreen');//取消横屏样式
+        // }
+        // if (window.orientation === 90 || window.orientation === -90 ){
+        //   console.log("横屏");
+        //   // $(".codeIg_s").addClass('vercreen');//添加横屏样式
+        // }
+      },
+      false
+    );
+  },
+  methods: {
+    openSceneList() {
+      let that = this;
+      this.openStatus = !this.openStatus;
+      if (this.openStatus) {
+        // 向上平移
+        this.$refs["scene_list"].style.display = "block";
+        this.$refs["scene_list"].classList.add("animate__fadeInUp");
+        setTimeout(() => {
+          this.$refs["scene_list"].classList.remove("animate__fadeInUp");
+        }, 1000);
+      } else {
+        // 向下平移
+        this.$refs["scene_list"].classList.add("animate__fadeOutDown");
+        setTimeout(() => {
+          this.$refs["scene_list"].style.display = "none";
+          this.$refs["scene_list"].classList.remove("animate__fadeOutDown");
+        }, 1000);
+      }
+    },
+    jumpScene(item) {
+      this.sceneData = this.sceneData.map(function (item, index) {
+        item.children = item.children.map(function (tt, index) {
+          tt.active = false;
+          return tt;
+        });
+        return item;
+      });
+
+      item.active = true;
+      cancelLookAround();
+      showTitle(item.name);
+      this.$flyTo({
+        lon: item.camera.lon,
+        lat: item.camera.lat,
+        h: item.camera.h,
+        heading: item.camera.heading,
+        pitch: item.camera.pitch,
+        roll: item.camera.roll,
+        time: 1,
+        pitchAdjustHeight: 1000,
+        details: item,
+        callback: null,
+      });
+    },
+    clearSceneActive(index) {
+      if (this.imageList)
+        this.imageList = this.imageList.map(function (tt, index) {
+          tt.active = false;
+          return tt;
+        });
+    },
+    tabChange(index, title) {
+      let that = this;
+      setTimeout(() => {
+        that.tabTendered(index);
+      }, 100);
+    },
+    tabTendered(index) {
+      let swiperOptions = {
+        loop: false, //自动轮播
+        slideToClickedSlide: true,
+        slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。auto为居中显示一个
+        centeredSlides: true, //若为true，那么活动块会居中，而非默认状态下的居左...false
+        spaceBetween: 20, //设置每个slide之间的距离（单位px）。
+      };
+      switch (index) {
+        case 0:
+          this.swiper1 = new Swiper(".mySwiper1", swiperOptions);
+          break;
+
+        case 1:
+          this.swiper2 = new Swiper(".mySwiper2", swiperOptions);
+          break;
+
+        case 2:
+          this.swiper3 = new Swiper(".mySwiper3", swiperOptions);
+          break;
+
+        case 3:
+          this.swiper4 = new Swiper(".mySwiper4", swiperOptions);
+          break;
+
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.scene {
+  position: absolute;
+  z-index: 0;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 0px;
+  .scene_button {
+    position: relative;
+    z-index: 1;
+    bottom: 30px;
+    left: 0px;
+    width: 30px;
+    height: 30px;
+    background: url(~@/assets/img/scene/scene.png) center center/100% 100%
+      no-repeat;
+    &.active {
+      background: url(~@/assets/img/scene/scene_active.png) center center/100%
+        100% no-repeat;
+    }
+  }
+  .scene_container {
+    position: absolute;
+    z-index: 1;
+    bottom: 30px;
+    left: 0px;
+    height: 116.6px;
+    width: 100%;
+    .van-tabs {
+      width: 100%;
+      height: 100%;
+      :deep(.van-tabs__wrap) {
+        height: 28px;
+        padding: 0px 20px;
+        background: #33333366;
+        transform: translateY(88.5px);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        .van-tabs__nav {
+          background: transparent;
+          padding: 0 0;
+          .van-tab {
+            width: fit-content;
+            min-width: 72px;
+            max-width: 120px;
+            .van-tab__text {
+              font-size: 10px;
+              color: #ffffff;
+            }
+            .van-tab__text--ellipsis {
+              overflow: unset !important;
+            }
+            .van-tab--active {
+              color: #ffffff;
+            }
+          }
+          .van-tabs__line {
+            bottom: 0px;
+          }
+        }
+      }
+      :deep(.van-tabs__content) {
+        transform: translateY(-32px);
+        background: #33333366;
+        padding: 5px 0px;
+        .swiper {
+          width: 100%;
+          height: 100%;
+        }
+        .swiper-slide {
+          width: 145.5px !important;
+          height: 78px !important;
+          overflow: hidden;
+
+          img {
+            width: 145.5px;
+            height: 78px;
+          }
+
+          .marquee,
+          span {
+            width: 100%;
+            color: #ffffff;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            font-size: 10px;
+            text-align: center;
+            background: #33333366;
+          }
+          &.active {
+            border: 2px solid #e77d00;
+          }
+        }
+
+        .swiper .swiper-wrapper .swiper-slide {
+          width: 650px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components2/ThreeJs.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="containerId"></div>
+</template>
+
+<script>
+//全部的THREEJS
+import * as THREE from "three";
+import OrbitControls from 'three-orbitcontrols';
+import { TilesRenderer } from "3d-tiles-renderer";
+
+export default {
+  data() {
+    return {
+      scene: null,
+      camera: null,
+      renderer: null,
+      textureLoader: null,
+    };
+  },
+  mounted() {
+    this.initThree().then(() => {
+      this.init3DT();
+    });
+  },
+  methods: {
+    initThree() {
+      return new Promise((resolve, reject) => {
+        console.log(THREE.REVISION);
+        //创建三大件
+        //1.1 场景
+        this.scene = new THREE.Scene();
+        //1.2 相机
+        this.camera = new THREE.PerspectiveCamera(
+          50,
+          window.innerWidth / window.innerHeight,
+          0.1,
+          1000
+        );
+        //1.3 渲染器
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+
+        //创建纹理加载器
+        this.textureLoader = new THREE.TextureLoader();
+
+        //设置相机
+        //设置摄像机位置,相机方向逆X轴方向，倾斜向下看
+        this.camera.position.set(360, 360, 0);
+        //指向场景中心
+        this.camera.lookAt(this.scene.position);
+        //添加坐标轴，辅助判断位置
+        let axes = new THREE.AxesHelper(1000);
+        axes.position.set(-30, 0, 0);
+        this.scene.add(axes);
+
+        //设置环境
+        this.renderer.setClearColor(new THREE.Color(0x282a36));
+        //设置场景大小
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        console.log(document.getElementById("containerId").clientWidth);
+        console.log(document.getElementById("containerId").clientHeight);
+        //渲染器开启阴影效果
+        this.renderer.shadowMap.enabled = true;
+        //渲染div到canvas
+        document
+          .getElementById("containerId")
+          .appendChild(this.renderer.domElement);
+
+        //鼠标键盘控制
+        this.controls = new OrbitControls(
+          this.camera,
+          this.renderer.domElement
+        );
+
+        //创建纹理加载器
+        this.textureLoader = new THREE.TextureLoader();
+
+        //点光源
+        let point = new THREE.PointLight(0xffffff);
+        point.position.set(0, 0, 0); //点光源位置
+        this.scene.add(point); //点光源添加到场景中
+        // 环境光
+        let ambient = new THREE.AmbientLight(0x999999);
+        this.scene.add(ambient);
+
+        //   this.camera.position.set(-40, 40, 30);
+        //   this.camera.lookAt(this.scene.position);
+
+        //   //创建球体
+        //   let sphereGeometry = new THREE.SphereGeometry(3, 50, 50);
+        //   let sphereTexture = this.textureLoader.load(
+        //     "/static/image/baskteballskin.png"
+        //   );
+        //   let sphereMaterial = new THREE.MeshBasicMaterial({
+        //     map: sphereTexture,
+        //     metalness: 0.2,
+        //     roughness: 0.07,
+        //     side: THREE.DoubleSide,
+        //   });
+        //   let sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
+        //   sphereMesh.position.set(-40, 5, 5);
+        //   this.scene.add(sphereMesh);
+
+        //   let _this = this;
+        //   let zAng = 0.0;
+        //   let flag = 1;
+        //   function renderScene() {
+        //     if (sphereMesh.position.x >= 50) {
+        //       flag = -1;
+        //     }
+        //     if (sphereMesh.position.x <= -40) {
+        //       flag = 1;
+        //     }
+        //     sphereMesh.position.x += flag * 0.2;
+        //     zAng += 1;
+        //     let y = 20 * Math.sin((zAng * Math.PI) / 180.0);
+        //     sphereMesh.position.y = y;
+        //     requestAnimationFrame(renderScene);
+        //     _this.renderer.render(_this.scene, _this.camera);
+        //   }
+        //   renderScene();
+        resolve();
+      });
+    },
+    init3DT() {
+      const tilesRenderer = new TilesRenderer("http://122.228.13.28:1009/3DTiles/qp/QPXZFWZX/image50/DM/tileset.json");
+      tilesRenderer.setCamera(this.camera);
+      tilesRenderer.setResolutionFromRenderer(this.camera, this.renderer);
+      this.scene.add(tilesRenderer.group);
+      this.animate();
+    },
+    animate() {
+      this.tilesRenderer.update();
+      this.renderer.render(this.camera, this.scene);
+      requestAnimationFrame(this.animate);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.containerId {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components2/Tool.vue

@@ -0,0 +1,1367 @@
+<template>
+  <div class="tool">
+    <ul class="func">
+      <li
+        v-for="(item, index) in funcList"
+        :key="index"
+        :class="{ active: item.active }"
+        @click="toolClickHandle(item)"
+      >
+        <p></p>
+        <!-- {{ item.label }} -->
+      </li>
+    </ul>
+    <div
+      :class="{ help: true, active: helpActive }"
+      v-show="false"
+      @click="showHelp"
+    ></div>
+
+    <!-- 展示索引页面 -->
+    <van-popup
+      v-model:show="indexesShow"
+      :class="'indexesListContent'"
+      :style="{ background: 'transparent' }"
+      :close-on-click-overlay="false"
+      :closed="hideIndexesInfoDailog"
+    >
+      <!-- closeable
+      close-icon="close" -->
+      <div class="indexesList">
+        <!-- <div class="header">
+          <span>青浦行政服务中心</span>
+        </div> -->
+        <div class="listContent">
+          <div class="header">
+            <!-- <span>青浦行政服务中心</span> -->
+          </div>
+          <!-- <div class="title_container">
+            <ul>
+              <li
+                v-for="(item, index) in cameraInfo"
+                :key="index"
+                :class="{ active: item.active }"
+                @click="changeFloor(item)"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
+          </div> -->
+          <div class="list_container">
+            <div>
+              <div
+                class="first_content"
+                v-for="(item, index) in cameraInfo"
+                :key="index"
+              >
+                <div class="title">{{ item.name }}</div>
+                <ul>
+                  <li
+                    v-for="(item_, index_) in item.children"
+                    :key="index_"
+                    :class="{ active: item_.active }"
+                    @click="changeView(item_)"
+                  >
+                    {{ item_.name }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <!-- <ul>
+              <li
+                v-for="(item, index) in cameraInfoChildren"
+                :key="index"
+                :class="{ active: item.active }"
+                @click="changeView(item)"
+              >
+                {{ item.name }}
+              </li>
+            </ul> -->
+          </div>
+        </div>
+      </div>
+      <div
+        class="close"
+        @click="hideIndexesInfoDailog"
+      ></div>
+    </van-popup>
+
+    <!-- 展示点位文字信息 -->
+    <van-popup
+      v-model:show="pointShow"
+      class="point_popup"
+      :style="{ background: 'transparent' }"
+      :close-on-click-overlay="false"
+      :closed="hidePointInfoDailog"
+    >
+      <div class="pointInfoContent">
+        <div v-html="pointInfos"></div>
+      </div>
+      <div
+        class="close"
+        @click="hidePointInfoDailog"
+      ></div>
+    </van-popup>
+
+    <!-- 展示平面图 -->
+    <van-popup
+      v-model:show="planeShow"
+      class="plane_popup"
+      :style="{ background: 'transparent' }"
+      :close-on-click-overlay="false"
+      :closed="hidePlaneInfoDailog"
+    >
+
+      <!--      :style="{
+        height: '460px',
+        width: '100%',
+        top: '55%',
+        background: 'transparent',
+      }" -->
+      <div class="plane_container">
+        <div class="image_container">
+          <ul>
+            <li
+              v-for="(item, index) in planeArr"
+              :key="index"
+              v-show="item.active"
+            >
+              <img
+                :src="item.src"
+                alt=""
+              />
+            </li>
+            <div
+              class="close"
+              @click="hidePlaneInfoDailog"
+            ></div>
+          </ul>
+        </div>
+        <div class="image_header">
+          <ul>
+            <li
+              v-for="(item, index) in planeArr"
+              :key="index"
+              :class="{ active: item.active }"
+              @click="choosePlane(index)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </van-popup>
+
+    <!-- 展示帮助 -->
+    <van-popup
+      v-model:show="helpShow"
+      class="help_popup"
+      :style="{
+        height: '180px',
+        width: '75%',
+        top: '50%',
+        background: 'transparent',
+      }"
+      :close-on-click-overlay="false"
+      :closed="hideHelpInfoDailog"
+    >
+      <div class="help_container">
+        <div class="header">提示</div>
+        <div class="content">
+          1. 选择模型中“ <span></span> ”可以移动，支持360°旋转
+          <div>2. 使用工具栏内“索引”功能，可快速切换场景</div>
+        </div>
+      </div>
+      <div
+        class="close"
+        @click="hideHelpInfoDailog"
+      ></div>
+    </van-popup>
+
+    <!-- 展示点位可办事项 -->
+    <van-popup
+      v-model:show="doThingShow"
+      class="doThing_popup"
+      :style="{ background: 'transparent' }"
+      :close-on-click-overlay="false"
+      :closed="hidePointInfoDailog"
+    >
+      <div class="content">
+        <div
+          class="doThingFirstContent"
+          v-if="
+            doThingFirst.length != 0 &&
+            Object.getOwnPropertyNames(doThingSecond).length == 0
+          "
+        >
+          <div class="header">部门</div>
+          <div class="list">
+            <ul>
+              <li
+                v-for="(item, index) in doThingFirst"
+                :key="index"
+                @click="chooseDBSecond(item)"
+              >
+                <span>{{ item.unit }}</span>
+                <span v-if="item.chiles">({{ item.chiles.length }})</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="doThingSecondContent"
+          v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
+        >
+          <div class="header">青浦区{{ doThingSecond.unit }}</div>
+          <div class="list">
+            <van-collapse
+              v-model="activeNames"
+              accordion
+            >
+              <div
+                v-for="(item, index) in doThingSecond.chiles"
+                :key="index"
+              >
+                <van-collapse-item
+                  :title="item.name"
+                  :name="index + 1 + ''"
+                  v-if="item.chiles[0].name.length != 0"
+                >
+                  <ul>
+                    <li
+                      v-for="(item_, index_) in item.chiles"
+                      :key="index_"
+                    >
+                      {{ item_.name }}
+                    </li>
+                  </ul>
+                </van-collapse-item>
+                <span
+                  class="item"
+                  v-else
+                >
+                  {{ item.name }}
+                </span>
+              </div>
+            </van-collapse>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="close"
+        @click="closeDoThingPopup"
+      ></div>
+      <!-- v-if="Object.getOwnPropertyNames(doThingSecond).length == 0" -->
+      <div
+        class="back"
+        @click="backDoThingPopup"
+        v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
+      ></div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      indexesTitleShow: false,
+      indexesTitleStr: "",
+      funcList: [],
+      viewClickHandle: null,
+      indexesShow: false,
+      pointShow: false,
+      planeShow: false,
+      helpShow: false,
+      doThingShow: false,
+      pointInfos: "",
+      doThingFirst: [],
+      doThingSecond: {},
+      Exection: null,
+      cameraInfo: systemConfig.pointInfo.camera,
+      mark: systemConfig.pointInfo.mark,
+      positionPoint: systemConfig.positionPoint,
+      cameraInfoChildren: [],
+      planeArr: [
+        {
+          name: "一层1F",
+          src: "./static/images/plane/plane1.png",
+          active: true,
+        },
+        {
+          name: "二层2F",
+          src: "./static/images/plane/plane2.png",
+          active: false,
+        },
+        {
+          name: "三层3F",
+          src: "./static/images/plane/plane3.png",
+          active: false,
+        },
+      ],
+      activeNames: "0",
+      helpActive: false,
+    };
+  },
+  mounted() {
+    let that = this;
+    this.funcList = [
+      {
+        label: "热点",
+        changeActive: true,
+        active: true,
+        clickFunc: this.loadPoint,
+      },
+      {
+        label: "索引",
+        changeActive: true,
+        active: false,
+        clickFunc: this.showIndexes,
+      },
+      {
+        label: "漫游",
+        changeActive: true,
+        active: false,
+        clickFunc: this.lookaround,
+      },
+      {
+        label: "复位",
+        changeActive: false,
+        active: false,
+        clickFunc: this.setViewDefaultlocation,
+      },
+      {
+        label: "平面图",
+        changeActive: true,
+        active: false,
+        clickFunc: this.showPlane,
+      },
+    ];
+    window.cancelLookAround = this.cancelLookAround;
+    setTimeout(() => {
+      that.loadPoint(that.funcList[0]);
+      that.loadPositionPoint();
+    }, 1000);
+  },
+  methods: {
+    // 工具栏点击事件
+    toolClickHandle(item) {
+      if (item.changeActive) item.active = !item.active;
+      item.clickFunc(item);
+    },
+
+    // 暂无功能的提示
+    undefinedFunction() {
+      this.$toast("功能暂未开通");
+    },
+
+    // 展示索引弹窗
+    showIndexes() {
+      this.cameraInfo = this.cameraInfo.map(function (tdd) {
+        tdd.active = false;
+        return tdd;
+      });
+      this.cameraInfo[0].active = true;
+      this.cameraInfoChildren = this.cameraInfo[0].children;
+      this.indexesShow = true;
+    },
+    // 索引页面关闭
+    hideIndexesInfoDailog() {
+      this.indexesShow = false;
+      this.funcList[1].active = false;
+    },
+    // 展示平面图弹窗
+    showPlane() {
+      this.planeShow = true;
+    },
+    hidePlaneInfoDailog() {
+      this.planeShow = false;
+      this.funcList[4].active = false;
+    },
+    // 帮助弹窗
+    showHelp() {
+      this.helpShow = true;
+    },
+    hideHelpInfoDailog() {
+      this.helpShow = false;
+    },
+
+    // 漫游
+    lookaround(item) {
+      let that = this;
+      // 清除场景激活
+      clearSceneActive();
+      this.$store.commit("changeFenceng", true);
+      hideTitle();
+      // 关闭热点
+      if (this.funcList[0].active == true) {
+        this.funcList[0].active = false;
+        this.funcList[0].clickFunc(this.funcList[0]);
+      }
+      closeHull(0);
+      unbindLimitCameraFunc();
+      if (!item.active) {
+        this.cancelLookAround();
+        return;
+      }
+
+      let options = {
+        lng: 121.12275503870025,
+        lat: 31.153914277622604,
+        pitch: -35,
+        height: 140,
+      };
+      // rotateCamera({lng:121.12275503870025, lat:31.153914277622604, pitch: -35, height: 140});
+      // // 相机绕点环绕飞行
+      // function rotateCamera(options){
+      var position = Cesium.Cartesian3.fromDegrees(
+        options.lng,
+        options.lat,
+        0.0
+      );
+      // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
+      var pitch = Cesium.Math.toRadians(options.pitch);
+      // 给定飞行一周所需时间，比如30s, 那么每秒转动度数
+      var angle = 360 / systemConfig.roveTime;
+      // 给定相机距离点多少距离飞行
+      var distance = options.height;
+      var startTime = Cesium.JulianDate.fromDate(new Date());
+
+      var stopTime = Cesium.JulianDate.addSeconds(
+        startTime,
+        30,
+        new Cesium.JulianDate()
+      );
+
+      globalVariable.viewer.clock.startTime = startTime.clone(); // 开始时间
+      globalVariable.viewer.clock.stopTime = stopTime.clone(); // 结速时间
+      globalVariable.viewer.clock.currentTime = startTime.clone(); // 当前时间
+      globalVariable.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
+      globalVariable.viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
+      // 相机的当前heading
+      var initialHeading = globalVariable.viewer.camera.heading;
+      this.Exection = function TimeExecution() {
+        // 当前已经过去的时间，单位s
+        var delTime = Cesium.JulianDate.secondsDifference(
+          globalVariable.viewer.clock.currentTime,
+          globalVariable.viewer.clock.startTime
+        );
+        // 根据过去的时间，计算偏航角的变化
+        var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
+
+        globalVariable.viewer.camera.lookAt(
+          position,
+          new Cesium.HeadingPitchRange(heading, pitch, distance)
+        );
+
+        if (
+          Cesium.JulianDate.compare(
+            globalVariable.viewer.clock.currentTime,
+            globalVariable.viewer.clock.stopTime
+          ) >= 0
+        ) {
+          that.cancelLookAround();
+        }
+      };
+      globalVariable.viewer.clock.onTick.addEventListener(that.Exection);
+    },
+    cancelLookAround() {
+      this.$store.commit("changeFenceng", false);
+      returnDefault();
+      if (this.Exection) {
+        globalVariable.viewer.clock.onTick.removeEventListener(this.Exection);
+        this.Exection = null;
+        globalVariable.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+      }
+      bindLimitCameraFunc();
+      this.funcList[2].active = false;
+    },
+
+    // 复位
+    setViewDefaultlocation(time) {
+      // 清除场景激活
+      clearSceneActive();
+      // 取消漫游
+      this.cancelLookAround();
+      showTitle("大门");
+      return new Promise((resolve, reject) => {
+        this.$flyTo({
+          lon: systemConfig.mapDefault.center.lon,
+          lat: systemConfig.mapDefault.center.lat,
+          h: systemConfig.mapDefault.height,
+          heading: systemConfig.mapDefault.heading,
+          pitch: systemConfig.mapDefault.pitch,
+          roll: systemConfig.mapDefault.roll,
+          time: 1,
+          pitchAdjustHeight: 1000,
+          callback: function () {},
+        }).then(() => {
+          resolve();
+        });
+      });
+    },
+
+    // 加载点位
+    loadPoint(param) {
+      let that = this;
+      // function getGuid() {
+      //   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+      //     /[xy]/g,
+      //     function (c) {
+      //       var r = (Math.random() * 16) | 0,
+      //         v = c == "x" ? r : (r & 0x3) | 0x8;
+      //       return v.toString(16);
+      //     }
+      //   );
+      // }
+      // return;
+      if (param.active) {
+        if (globalVariable.hotMarkerArr.length == 0) {
+          this.mark.map(function (item, index) {
+            // item.name;
+            // item.param.lon;
+            // item.param.lat;
+            // item.param.h;
+            // item.type;
+            let position = Cesium.Cartesian3.fromDegrees(
+              item.param.lon,
+              item.param.lat,
+              // item.param.lat,
+              item.param.h
+            );
+            let id = "entity_" + index;
+            if (item.img.indexOf("gif") > -1) {
+              let entity = globalVariable.viewer.entities.add({
+                id: id,
+                position: position,
+                // billboard: {
+                //   width: item.sizeW,
+                //   height: item.sizeH,
+                //   scale: 1.0,
+                //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                //   pixelOffset: new Cesium.Cartesian2(0, 0),
+                //   scaleByDistance: new Cesium.NearFarScalar(20, 0.6, 30, 0.8),
+                // },
+                // point: {
+                //   show: true, //是否显示，默认显示
+                //   pixelSize: 15,
+                // },
+                label: {
+                  text: item.name,
+                  font: "10pt Source Han Sans CN", //字体样式
+                  fillColor: Cesium.Color.WHITE, //字体颜色
+                  backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+                  showBackground: true, //是否显示背景颜色
+                  style: Cesium.LabelStyle.FILL, //label样式
+                  outlineWidth: 2,
+                  outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
+                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
+                  pixelOffset: new Cesium.Cartesian2(0, -20), //偏移
+                },
+              });
+              entity.infos = item;
+              entity.callback = that.pointClickHandle;
+              globalVariable.point_positions[id] = entity;
+              globalVariable.hotMarkerArr.push(entity);
+              // that.analysisImage(item.img, entity);
+            } else {
+              let entity = globalVariable.viewer.entities.add({
+                id: id,
+                position: position,
+                // billboard: {
+                //   image: item.img,
+                //   width: item.sizeW,
+                //   height: item.sizeH,
+                //   scale: 1.0,
+                //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                //   pixelOffset: new Cesium.Cartesian2(0, 0),
+                // },
+                label: {
+                  text: item.name,
+                  font: "10pt Source Han Sans CN", //字体样式
+                  fillColor: Cesium.Color.WHITE, //字体颜色
+                  backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+                  showBackground: true, //是否显示背景颜色
+                  style: Cesium.LabelStyle.FILL, //label样式
+                  outlineWidth: 2,
+                  outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
+                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
+                  pixelOffset: new Cesium.Cartesian2(0, 23), //偏移
+                },
+              });
+              entity.infos = item;
+              entity.callback = that.pointClickHandle;
+              globalVariable.point_positions[id] = entity;
+              globalVariable.hotMarkerArr.push(entity);
+            }
+            // that.addGIF2(item, position, id);
+          });
+        } else {
+          if (globalVariable.hotMarkerArr.length > 0)
+            globalVariable.hotMarkerArr.map(function (item) {
+              item.show = true;
+            });
+        }
+      } else {
+        if (globalVariable.hotMarkerArr.length > 0)
+          globalVariable.hotMarkerArr.map(function (item) {
+            item.show = false;
+          });
+      }
+      return;
+      globalVariable.viewer.scene.postRender.addEventListener(function () {
+        globalVariable.hotMarkerArr.map(function (item) {
+          var canvasPosition =
+            globalVariable.viewer.scene.cartesianToCanvasCoordinates(
+              item._position._value,
+              new Cesium.Cartesian2()
+            );
+          if (
+            Cesium.defined(canvasPosition) &&
+            !isNaN(canvasPosition.x) &&
+            !isNaN(canvasPosition.y)
+          ) {
+            document.getElementsByClassName(item.id)[0].style.display = "block";
+            if (!document.getElementsByClassName(item.id)) return;
+            document.getElementsByClassName(item.id)[0].style.top = `${
+              canvasPosition.y - 15
+            }px`;
+            document.getElementsByClassName(item.id)[0].style.left = `${
+              canvasPosition.x - 15
+            }px`;
+          } else {
+            document.getElementsByClassName(item.id)[0].style.display = "none";
+          }
+        });
+      });
+    },
+
+    addGIF2(item, position, id) {
+      let c = globalVariable.viewer.scene.cartesianToCanvasCoordinates(
+        position,
+        new Cesium.Cartesian2()
+      );
+      //创建一个div
+      var div = document.createElement("div");
+      //为div创建属性class = "test"
+      var divattr = document.createAttribute("class");
+      divattr.value = "hotpoint image " + id;
+      //把属性class = "test"添加到div
+      div.setAttributeNode(divattr);
+
+      document.getElementById("cesiumContainer").appendChild(div);
+      //创建一个值为test的按钮
+      var img = document.createElement("img");
+      var imgAttr = document.createAttribute("src");
+      imgAttr.value = item.img;
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.setAttributeNode(imgAttr);
+
+      div.appendChild(img);
+
+      div.style.position = "absolute";
+      div.style.width = "30px";
+      div.style.height = "30px";
+      div.style.top = `${c.y - 15}px`;
+      div.style.left = `${c.x - 15}px`;
+    },
+
+    // 关闭可办事项
+    closeDoThingPopup() {
+      this.doThingShow = false;
+      this.doThingFirst = [];
+      this.doThingSecond = {};
+    },
+    // 返回至可办事项一级菜单
+    backDoThingPopup() {
+      this.doThingSecond = {};
+    },
+    // 选择可办事项展示
+    chooseDBSecond(item) {
+      this.doThingSecond = item;
+    },
+
+    // 点位触发事件
+    pointClickHandle(item) {
+      let that = this;
+      switch (item.type) {
+        case 1:
+          // 弹窗
+          let strTo = ``;
+          item.text.map(function (str) {
+            strTo += str + "<br>";
+          });
+          this.pointInfos = strTo;
+          this.pointShow = true;
+          break;
+        case 2:
+          // 跳转
+          if (this.$store.state.IsPC) {
+            let openUrl = item.pc_url ? item.pc_url : item.url;
+            window.open(openUrl, "_blank");
+          } else {
+            window.location.href = item.pc_url ? item.pc_url : item.url;
+          }
+          break;
+        case 3:
+          break;
+        case 4:
+          // 点位触发camera转换
+          this.$flyTo({
+            lon: item.camera.lon,
+            lat: item.camera.lat,
+            h: item.camera.h,
+            heading: item.camera.heading,
+            pitch: item.camera.pitch,
+            roll: item.camera.roll,
+            time: 1,
+            pitchAdjustHeight: 1000,
+            details: item,
+            callback: function (item) {
+              // closeHull(item.camera.sceneType);
+              showTitle(item.details.areaName);
+            },
+          }).then(() => {});
+          break;
+        case 5:
+          $.getJSON(item.json, function (arr) {
+            that.doThingFirst = arr;
+            that.doThingShow = true;
+          });
+          break;
+        default:
+          break;
+      }
+    },
+
+    // 加载跳转点位
+    loadPositionPoint() {
+      let that = this;
+
+      this.positionPoint.map(function (item, index) {
+        // console.log(
+        //   item.areaName +
+        //     "：" +
+        //     Cesium.Math.toDegrees(item.lon) +
+        //     ", " +
+        //     Cesium.Math.toDegrees(item.lat)
+        // );
+        let id = "jump_" + index;
+        let entity = globalVariable.viewer.entities.add({
+          id: id,
+          position: Cesium.Cartesian3.fromRadians(item.lon, item.lat, item.h),
+          billboard: {
+            image: "./static/images/position_point.png",
+            width: 36,
+            height: 18,
+            scale: 1.0,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, 0),
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+              0,
+              15
+            ),
+          },
+          // label: {
+          //   text: item.areaName != "" ? item.areaName : "" + (index + 1),
+          //   // text: "" + (index + 1),
+          //   font: "10pt Source Han Sans CN", //字体样式
+          //   fillColor: Cesium.Color.WHITE, //字体颜色
+          //   backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+          //   showBackground: false, //是否显示背景颜色
+          //   style: Cesium.LabelStyle.FILL, //label样式
+          //   outlineWidth: 2,
+          //   outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
+          //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
+          //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
+          //   pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
+          // },
+        });
+        entity.infos = item;
+        entity.callback = that.jumpPositionEvent;
+        globalVariable.point_positions[id] = entity;
+        globalVariable.jumpPointArr.push(entity);
+      });
+    },
+
+    // 跳转事件触发
+    jumpPositionEvent(item) {
+      showTitle(item.areaName);
+      this.$flyTo({
+        lon: Cesium.Math.toDegrees(item.lon),
+        lat: Cesium.Math.toDegrees(item.lat),
+        h: item.viewH,
+        heading: Cesium.Math.toDegrees(globalVariable.viewer.camera.heading),
+        pitch: 0, // globalVariable.viewer.camera.pitch,
+        roll: 0, // globalVariable.viewer.camera.roll,
+        time: 1,
+        pitchAdjustHeight: 1000,
+        details: item,
+        callback: function () {},
+      }).then(() => {
+        // resolve();
+      });
+    },
+
+    // 解析图片
+    analysisImage(src, entity) {
+      // return new Promise((resolve, reject) => {
+      // if (src.indexOf("gif") > -1) {
+      let can = document.createElement("canvas");
+      let gif = gifler(src);
+      gif.animate(can);
+      gif.frames(can, function (ctx, frame) {
+        // console.log(frame.buffer.toDataURL());
+        entity.billboard.image = new Cesium.CallbackProperty(() => {
+          // console.log(frame.buffer.toDataURL());
+          return frame.buffer.toDataURL();
+        }, false);
+        // resolve(d);
+      });
+      // } else {
+      //   resolve(src);
+      // }
+      // });
+    },
+
+    // 切换视角
+    changeView(item) {
+      // 清除场景激活
+      clearSceneActive();
+      this.cancelLookAround();
+      if (item.lon == null) {
+        this.$toast("暂无当前位置信息");
+        return;
+      }
+      if (item.showTitle) {
+        showTitle(item.name);
+      }
+
+      this.$flyTo({
+        lon: item.lon,
+        lat: item.lat,
+        h: item.h,
+        heading: item.heading,
+        pitch: item.pitch,
+        roll: item.roll,
+        time: 1,
+        pitchAdjustHeight: 1000,
+        details: item,
+        callback: function (item) {
+          closeHull(item.details.sceneType);
+        },
+      });
+
+      this.indexesShow = false;
+      this.funcList[1].active = false;
+    },
+
+    // 切换索引楼层
+    changeFloor(item) {
+      this.cameraInfo = this.cameraInfo.map(function (tdd) {
+        tdd.active = false;
+        return tdd;
+      });
+      item.active = true;
+      this.cameraInfoChildren = item.children;
+    },
+
+    hidePointInfoDailog() {
+      this.pointShow = false;
+    },
+
+    // 切换楼层
+    choosePlane(index) {
+      this.planeArr = this.planeArr.map(function (item, ind) {
+        if (index == ind) {
+          item.active = true;
+        } else {
+          item.active = false;
+        }
+        return item;
+      });
+    },
+  },
+
+  watch: {
+    helpShow: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.helpActive = true;
+        } else {
+          this.helpActive = false;
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@media screen and (orientation: landscape) {
+  .tool {
+    position: absolute;
+    right: 15px;
+    top: 20px !important;
+    z-index: 1;
+  }
+}
+
+.tool {
+  position: absolute;
+  right: 15px !important;
+  top: 35px !important;
+  z-index: 1;
+  .func {
+    overflow: hidden;
+    li {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      font-weight: bold;
+      position: relative;
+      margin-bottom: 6px;
+      p {
+        width: 100%;
+        height: 100%;
+      }
+      &:nth-child(1) {
+        p {
+          background: url(~@/assets/img/tool/new_tb/hotpoint.png) center
+            center/100% 100% no-repeat;
+        }
+        &.active p {
+          background: url(~@/assets/img/tool/new_tb/hotpoint_active.png) center
+            center/100% 100% no-repeat;
+        }
+      }
+      &:nth-child(2) {
+        p {
+          background: url(~@/assets/img/tool/new_tb/indexes.png) center
+            center/100% 100% no-repeat;
+        }
+        &.active p {
+          background: url(~@/assets/img/tool/new_tb/indexes_active.png) center
+            center/100% 100% no-repeat;
+        }
+      }
+      &:nth-child(3) {
+        p {
+          background: url(~@/assets/img/tool/new_tb/pan.png) center center/100%
+            100% no-repeat;
+        }
+        &.active p {
+          background: url(~@/assets/img/tool/new_tb/pan_active.png) center
+            center/100% 100% no-repeat;
+        }
+      }
+      &:nth-child(4) {
+        p {
+          background: url(~@/assets/img/tool/new_tb/reposition.png) center
+            center/100% 100% no-repeat;
+        }
+        &.active p {
+          background: url(~@/assets/img/tool/new_tb/reposition_active.png)
+            center center/100% 100% no-repeat;
+        }
+      }
+      &:nth-child(5) {
+        p {
+          background: url(~@/assets/img/tool/new_tb/plan.png) center center/100%
+            100% no-repeat;
+        }
+        &.active p {
+          background: url(~@/assets/img/tool/new_tb/plan_active.png) center
+            center/100% 100% no-repeat;
+        }
+      }
+    }
+  }
+  .help {
+    width: 50px;
+    height: 50px;
+    background: url(~@/assets/img/tool/new_tb/help.png) center center / 100%
+      100% no-repeat;
+    &.active {
+      background: url(~@/assets/img/tool/new_tb/help_active.png) center
+        center/100% 100% no-repeat;
+    }
+  }
+
+  :deep(.indexesListContent) {
+    width: 394px;
+    height: 380px;
+    .indexesList {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 34px);
+      background: #33333366;
+      border-radius: 2px;
+      .listContent {
+        padding: 5px 20px;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        overflow-y: auto;
+        .header {
+          width: 265.2px;
+          height: 22.8px;
+          overflow: hidden;
+          position: relative;
+          text-align: center;
+          color: #ffffff;
+          margin: 21px auto;
+          background: url(~@/assets/img/tool/indexes_header.png) center center /
+            100% 100% no-repeat;
+        }
+        .list_container {
+          width: 100%;
+          // height: 50px;
+          height: calc(100% - 61px);
+          overflow: hidden;
+          overflow-y: auto;
+          .first_content {
+            overflow: hidden;
+            .title {
+              color: #ffffff;
+              font-size: 20px;
+            }
+          }
+          li {
+            width: 150px;
+            height: 50px;
+            margin: 5px calc(50% - 150px);
+            float: left;
+            line-height: 50px;
+            text-align: center;
+            font-size: 15px;
+            color: #fefeff;
+            position: relative;
+            background: #ffffff33;
+            border-radius: 2px;
+            &:nth-child(2n) {
+              margin-right: 0px;
+            }
+            &:nth-child(2n-1) {
+              margin-left: 0px;
+            }
+          }
+        }
+      }
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+      margin: 4px 4px;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+  }
+  :deep(.point_popup) {
+    width: 394px;
+    height: 380px;
+
+    .pointInfoContent {
+      width: 100%;
+      height: 100%;
+      font-size: 20px;
+      padding: 20px 25px;
+      box-sizing: border-box;
+      line-height: 30px;
+      color: #ffffff;
+      background: #33333366;
+      border-radius: 2px;
+      div {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        overflow-y: auto;
+      }
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+      margin: 4px 4px;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+  }
+  :deep(.plane_popup) {
+    width: 394px;
+    height: 380px;
+    .plane_container {
+      width: 100%;
+    }
+    .image_header {
+      color: #dbdbdb;
+      font-size: 16px;
+      height: 32px;
+      background: rgba(0, 0, 0, 0.4);
+      margin-top: 10px;
+      ul {
+        display: block;
+        width: fit-content;
+        height: 32px;
+        margin: 0 auto;
+        li {
+          float: left;
+          padding: 5px 10px;
+          margin-right: 10px;
+          height: 28px;
+          box-sizing: border-box;
+          font-size: 12px;
+          &.active {
+            border-bottom: 2px solid #ffc125;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .image_container {
+      display: block;
+      width: 394px;
+      height: 280px;
+      margin: 0 auto;
+      position: relative;
+      background: #33333366;
+      border-radius: 2px;
+      ul {
+        display: block;
+        width: 100%;
+        height: 100%;
+        li {
+          display: block;
+          width: 100%;
+          height: 100%;
+          padding: 10px 10px;
+          box-sizing: border-box;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+            object-fit: contain;
+          }
+        }
+      }
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+      margin: 4px 4px;
+      margin-right: 10px;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+  }
+  :deep(.help_popup) {
+    width: 394px;
+    height: 380px;
+    .help_container {
+      box-sizing: border-box;
+      overflow: hidden;
+      overflow-y: auto;
+      width: 100%;
+      height: 100%;
+      background: #33333366;
+      border-radius: 2px;
+      .header {
+        color: #ffffff;
+        font-size: 18px;
+        margin-top: 10px;
+        text-align: center;
+        font-weight: bold;
+      }
+      .content {
+        color: #ffffff;
+        font-size: 16px;
+        line-height: 32px;
+        padding: 0 15px;
+        span {
+          display: inline-block;
+          background: #1fb4ff;
+          width: 16px;
+          height: 16px;
+          border-radius: 16px;
+        }
+      }
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+      margin: 4px 4px;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+  }
+  :deep(.doThing_popup) {
+    width: 394px;
+    height: 380px;
+    .content {
+      width: 100%;
+      height: 100%;
+      font-size: 20px;
+      padding: 25px 0px;
+      box-sizing: border-box;
+      line-height: 30px;
+      color: #ffffff;
+      background: #33333366;
+      border-radius: 2px;
+      .doThingFirstContent {
+        width: 100%;
+        height: 100%;
+        .header {
+          text-align: center;
+          height: 30px;
+          letter-spacing: 30px;
+          text-indent: 30px;
+        }
+        .list {
+          height: calc(100% - 30px);
+          overflow: hidden;
+          overflow-y: auto;
+          li {
+            width: 150px;
+            height: 50px;
+            margin: 5px calc(25% - 75px);
+            float: left;
+            line-height: 48.05px;
+            text-align: center;
+            font-size: 15px;
+            color: #fefeff;
+            position: relative;
+            &::after {
+              content: "";
+              height: 2px;
+              width: 120px;
+              position: absolute;
+              background: url(~@/assets/img/tool/indexes_point_bottom.png)
+                center center / 100% 100% no-repeat;
+              bottom: 0px;
+              left: 15px;
+            }
+            &.active {
+              color: #ffc44d;
+              background: url(~@/assets/img/tool/indexes_point_active.png)
+                center center / 100% 100% no-repeat;
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+      .doThingSecondContent {
+        width: 100%;
+        height: 100%;
+        .header {
+          text-align: center;
+          height: 30px;
+          letter-spacing: 8px;
+          text-indent: 8px;
+        }
+        .list {
+          height: calc(100% - 30px);
+          overflow: hidden;
+          overflow-y: auto;
+          .van-collapse {
+            .item {
+              display: inline-block;
+              width: calc(100% - 32px);
+              height: 24px;
+              line-height: 24px;
+              padding: 10px 0px;
+              margin: 0px 16px;
+              font-size: 12px;
+              position: relative;
+              border-bottom: 1px solid #ffffff;
+            }
+            .van-collapse-item {
+              .van-cell {
+                background: transparent;
+                color: #ffffff;
+                margin: 0px 16px;
+                padding: 10px 0px;
+                width: calc(100% - 32px);
+                border-bottom: 1px solid #ffffff;
+                font-size: 12px;
+                .van-cell__right-icon:before {
+                  color: #ffffff;
+                }
+                .van-cell__title {
+                  line-height: 20.75px;
+                }
+              }
+              .van-collapse-item__content {
+                background: transparent;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                margin: 0px 16px;
+                padding: 0 0;
+                li {
+                  min-height: 20.75px;
+                  line-height: 20.75px;
+                  padding: 10px 0px;
+                  color: #ffffff;
+                  border-bottom: 1px solid rgba(235, 237, 240);
+                  text-indent: 20px;
+                  font-size: 12px;
+                }
+              }
+              :deep(.van-collapse-item--border:after) {
+                border-top: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+      margin: 4px 4px;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+    }
+    .back {
+      width: 24px;
+      height: 24px;
+      background: url(~@/assets/img/tool/back.png) center center / 100% 100%
+        no-repeat;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      border-radius: 50px;
+    }
+  }
+}
+:deep(.hotpoint) {
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/Home2.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="home home2">
+    <div v-show="indexesTitleShow" class="indexes_title">
+      {{ indexesTitleStr }}
+    </div>
+    <MainMap v-if="mapShow"></MainMap>
+    <!-- <GamePad></GamePad> -->
+    <Scene></Scene>
+    <LTool></LTool>
+  </div>
+</template>
+<script>
+import { defineAsyncComponent } from "vue";
+
+export default {
+  name: "Home",
+  components: {
+    MainMap: defineAsyncComponent(() => import("@/components2/MainMap.vue")),
+    // GamePad: defineAsyncComponent(() => import("@/components/GamePad.vue")),
+    Scene: defineAsyncComponent(() => import("@/components2/Scene.vue")),
+    LTool: defineAsyncComponent(() => import("@/components2/LTool.vue")),
+  },
+  data() {
+    return {
+      indexesTitleShow: true,
+      indexesTitleStr: "大门",
+      mapShow: true,
+      gifShow: true,
+    };
+  },
+  mounted() {
+    let that = this;
+    window.showTitle = this.showTitle;
+    window.hideTitle = this.hideTitle;
+    // setTimeout(() => {
+    //   that.mapShow = true;
+    // }, 2000);
+    // setTimeout(() => {
+    //   that.$refs.loadingVideoContainer.classList.add("animate__fadeOut");
+    //   setTimeout(() => {
+    //     that.$refs.loadingVideoContainer.remove();
+    //   }, 1000);
+    // }, 4500);
+  },
+  methods: {
+    showTitle(str) {
+      this.indexesTitleShow = true;
+      if (str != undefined && str != null && str != "")
+        this.indexesTitleStr = str;
+    },
+    hideTitle() {
+      this.indexesTitleShow = false;
+      this.indexesTitleStr = "";
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .indexes_title {
+    position: absolute;
+    z-index: 1; 
+    left: 50%;
+    margin-left: -100px;
+    width: 200px;
+    height: 30px; 
+    background: #33333366;
+    border-radius: 100px;
+    font-weight: bold; 
+    color: #ffffff;
+    text-align: center;
+    line-height: 30px;
+    font-size: 16px;
+    top: 10px;
+  }
+  .loadingVideoContainer {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    background-color: #95afc0;
+
+    // top: calc(50% - 187.5px);
+    // left: calc(50% - 187.5px);
+
+    // background-image: url("~@/assets/img/loading3.gif");
+    // background-position: center center;
+    // background-size: 100%;
+    // background-repeat: no-repeat;
+
+    // video {
+    //   width: 100%;
+    //   mix-blend-mode: screen;
+    // }
+    .title {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      top: 5%;
+      font-size: 25px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    .content {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 32px;
+      padding: 0 15px;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: center;
+      margin-bottom: 20px;
+      span {
+        display: inline-block;
+        background: #1fb4ff;
+        width: 16px;
+        height: 16px;
+        border-radius: 16px;
+      }
+    }
+  }
+  @media screen and (orientation: portrait) {
+    .loadingVideoContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .container {
+      width: 415px;
+      height: 415px;
+    }
+  }
+  @media screen and (orientation: landscape) {
+    .loadingVideoContainer {
+      display: flex;
+    }
+    .container {
+      width: 415px;
+      height: 315px;
+      display: flex;
+      justify-content: space-evenly; /* 水平均匀分布 */
+      align-items: center; /* 垂直居中 */
+      flex-direction: column;
+      margin: 0 auto;
+      margin-top: 75px;
+      margin-bottom: 75px;
+    }
+    .content {
+      margin-bottom: 5px !important;
+    }
+  }
+}
+:deep(.video-js) {
+  background-color: transparent;
+}
+</style>