天空盒提交

src/components/Combinations/toolBar/toolBar.scss

@@ -98,4 +98,11 @@ ul {
     border-color: #5ecef09a;
     // color: #64daff;
     // font-size: 12px;
+}
+
+.toolBar .el-select{
+    width: 87px;
+    height: 30px;
+    margin-top: 3px;
+    margin-right: 5px;
 }

src/components/Combinations/toolBar/toolBar.vue

@@ -7,6 +7,10 @@
     <div class="toolBar">
       <el-cascader size="mini" :show-all-levels="false" :options="xzqTreeData" placeholder="行政区"
         :props="{ checkStrictly: true, expandTrigger: 'hover' }" clearable v-model="xzqTreeValue"></el-cascader>
+      <el-select size="mini" v-model="Skybox" placeholder="天空盒">
+        <el-option v-for="item in SkyboxList" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
       <li class="sm-btn sm-tool-btn" :title="Resource.Resource" @click="choose(0)">
         <span class="iconfont icontuceng"></span>
       </li>
@@ -84,6 +88,7 @@ export default {
   props: {},
   data() {
     return {
+      last: false,
       sharedState: store.state,
       show: true,
       clickShow: false,
@@ -91,18 +96,118 @@ export default {
       xzqTreeData: [],
       xzqTreeValue: "",
       curXzqCode: "",
+      Skybox: "",
+      skyListener: null,
+      defaultSkyBox: null,
+      ViewerSkyBox: {},
+      SkyboxList: [{
+        value: 'lantian',
+        label: '蓝天'
+      }, {
+        value: 'qingtian',
+        label: '晴天'
+      }, {
+        value: 'wanxia',
+        label: '晚霞'
+      }, {
+        value: 'cloudy',
+        label: '多云'
+      }, {
+        value: 'partly_cloudy_puresky',
+        label: '晴间多云'
+      }, {
+        value: 'yewan',
+        label: '夜晚'
+      }]
     };
   },
   created() {
     this.getXzqTreeData();
+    this.initSkyBox();
   },
   computed: {
     ToolBarShow: function () {
       return this.sharedState.ToolBarShow;
     },
   },
-
   methods: {
+    initSkyBox() {
+      for (let i = 0; i < this.SkyboxList.length; i++) {
+        let c = new Cesium.SkyBox({
+          sources: {
+            positiveX: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Right.jpg",
+            negativeX: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Left.jpg",
+            positiveY: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Front.jpg",
+            negativeY: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Back.jpg",
+            positiveZ: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Up.jpg",
+            negativeZ: "/static/Cesium/Assets/Textures/SkyBox/" + this.SkyboxList[i].value + "/Down.jpg",
+          },
+        })
+        c.WSpeed = 0.5;
+        this.ViewerSkyBox[this.SkyboxList[i].value] = c;
+      }
+    },
+    setSkyBox() {
+      let scene = window.viewer.scene;
+      scene.cloudBox = null;
+      this.currentSkyBox = this.ViewerSkyBox[this.Skybox];
+      if (!this.last) {
+        this.defaultSkyBox = window.scene.skyBox;
+        this.last = !this.last;
+        for (let attr in this.ViewerSkyBox) {
+          this.ViewerSkyBox[attr].update(scene.frameState, true);
+        }
+        let that = this;
+        this.skyListener = function () {
+          let cameraHeight = scene.camera.positionCartographic.height;
+          let skyAtmosphereH1 = 22e10; // 大气开始渐变的最大高度
+          let skyBoxH1 = 15e4; // 天空开始渐变的最大高度
+          let skyBoxH2 = 12e4; // 天空开始渐变的最小高度
+          let bufferHeight = 1e4;
+          if (cameraHeight < skyAtmosphereH1 && Cesium.defined(that.currentSkyBox)) {
+            let skyAtmosphereT = (cameraHeight - skyBoxH2) / (skyAtmosphereH1 - skyBoxH2);
+            if (skyAtmosphereT > 1.0) {
+              skyAtmosphereT = 1.0;
+            } else if (skyAtmosphereT < 0.0) {
+              skyAtmosphereT = 0.0;
+            }
+            let skyBoxT = (cameraHeight - skyBoxH2) / (skyBoxH1 - skyBoxH2);
+            if (skyBoxT > 1.0) {
+              skyBoxT = 1.0;
+            } else if (skyBoxT < 0.0) {
+              skyBoxT = 0.0;
+            }
+            that.currentSkyBox.alpha = 1.0 - skyBoxT;
+            // that.currentSkyBox.alpha = 1.0;
+            scene.skyBox = that.currentSkyBox;
+            if (cameraHeight > skyBoxH2) {
+              scene.skyAtmosphere.show = true;
+              scene.skyAtmosphere.alpha = skyAtmosphereT;
+              // scene.skyAtmosphere.alpha = 1.0;
+              // scene.skyBox = that.currentSkyBox;
+            } else {
+              scene.skyAtmosphere.show = false;
+            }
+          } else {
+            scene.skyAtmosphere.alpha = 1.0;
+            scene.skyBox = that.defaultSkyBox;
+          }
+          //控制相机 速率
+          // if (scene.skyBox !== that.defaultSkyBox) {
+          //   if (cameraHeight > (skyBoxH2 - 2 * bufferHeight) && cameraHeight < skyBoxH1 + 3 * bufferHeight) {
+          //     scene.screenSpaceCameraController.zoomFactor = 0.4;
+          //   } else {
+          //     scene.screenSpaceCameraController.zoomFactor = 5.0;
+          //   }
+          // } else {
+          //   scene.skyBox.alpha = 1.0;
+          //   scene.skyAtmosphere.alpha = 1.0;
+          //   scene.screenSpaceCameraController.zoomFactor = 5.0;
+          // }
+        };
+        window.scene.postRender.addEventListener(this.skyListener);
+      }
+    },
     getXzqGeom() {
       GetXzqhGeom(this.curXzqCode).then((res) => {
         viewer.entities.removeAll();
@@ -141,17 +246,6 @@ export default {
     },
     choose(i) {
       store.setToolBarAction(i);
-      // if (i == 9) {
-      //   this.plan = false;
-      //   this.clickShow = !this.clickShow;
-      // } else if (i == 10) {
-      //   this.clickShow = false;
-      //   this.plan = !this.plan;
-      // } else {
-      //   this.clickShow = false;
-      //   this.plan = false;
-      //   store.setToolBarAction(i);
-      // }
     },
   },
   watch: {
@@ -163,6 +257,9 @@ export default {
         this.getXzqGeom();
       }
     },
+    Skybox() {
+      this.setSkyBox();
+    }
   },
 };
 </script>

static/Config/config.js

@@ -1,5 +1,5 @@
 //后台地址配置
-window.axiosURI = "http://192.168.100.30:8080";
+window.axiosURI = "http://192.168.60.52:8080";
 //倾斜模型高度配置
 window.modelBottomAltitude = 10;
 // 服务器ip
@@ -426,7 +426,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "地类图斑",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "地类图斑",
         },
@@ -568,7 +568,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "规划地块",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "规划地块",
         },
@@ -670,7 +670,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "建筑退线",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "建筑退线",
         },
@@ -772,7 +772,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "道路中线",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "道路中线",
         },
@@ -792,7 +792,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "禁止开口线",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "禁止开口线",
         },
@@ -812,7 +812,7 @@ window.layerTree = [
         date_server: {
           nvfid: "4526wsd78",
           server_name: "道路红线",
-          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1-2/rest/data",
+          url: "http://192.168.60.2:8090/iserver/services/data-sanyamap1/rest/data",
           dataSourceName: "sanya",
           datasetName: "道路红线",
         },