real3d-portalsite/src/components/Combinations/toolBar/toolBar.vue

<template>
  <!-- 暂时隐藏工具栏 -->
  <div v-show="ToolBarShow">
    <!-- <div v-if="true"> -->

    <!-- <div class="resourceTree" @click="choose(0)"></div> -->
    <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>

      <!-- <ul v-if="show"> -->
      <li class="sm-btn sm-tool-btn" :title="Resource.PoinyQuery" @click="choose(9)">
        <i class="el-icon-thumb"></i>
      </li>
      <li class="sm-btn sm-tool-btn" :title="Resource.PlacenameLocation" @click="choose(10)">
        <i class="el-icon-place"></i>
      </li>
      <li class="sm-btn sm-tool-btn" :title="Resource.BookMark" @click="choose(11)">
        <i class="el-icon-notebook-2"></i>
      </li>
      <li class="sm-btn sm-tool-btn" :title="Resource.measure" @click="choose(7)">
        <span class="iconfont iconliangsuan"></span>
      </li>
      <!-- <li class="sm-btn sm-tool-btn" :title="Resource.clip" @click="choose(4)">
        <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
      </li> -->
      <li class="sm-btn sm-tool-btn" :title="Resource.terrain" @click="choose(5)">
        <span class="iconfont icondixing"></span>
      </li>
      <li class="sm-btn sm-tool-btn" :title="Resource.onlineEditing" @click="choose(8)">
        <span class="iconfont iconzaixianbianji"></span>
      </li>
      <li class="sm-btn sm-tool-btn" :title="Resource.analysis" @click="choose(6)">
        <span class="iconfont iconsanweifenxi"></span>
      </li>
      <!-- <li class="sm-btn sm-tool-btn" :title="Resource.fly" @click="choose(12)">
        <i class="el-icon-guide"></i>
      </li> -->
      <li class="sm-btn sm-tool-btn" :title="Resource.sceneOptions" @click="choose(3)">
        <i class="el-icon-setting"></i>
      </li>
      <!-- </ul> -->
      <div style="display: none" class="sm-tool-btn" @click="toggleVisibility" :class="{ 'sm-tool-btn-only': !show }">
        <span class="iconfont" :class="!show
          ? 'iconiEarth-R8-xiugai_shouqi'
          : 'iconiEarth-R8-xiugai_zhankai'
          "></span>
      </div>
    </div>
    <!-- 调用子组件-->
    <Bookmark></Bookmark>
    <layer-manage></layer-manage>
    <add-layers></add-layers>
    <add-base-layer></add-base-layer>
    <scene-atttribute></scene-atttribute>
    <terrain-analysis></terrain-analysis>
    <clip-analysis></clip-analysis>
    <sm3d-measure></sm3d-measure>
    <sm3d-analysis></sm3d-analysis>
    <online-edit></online-edit>
    <!-- <scene-camera></scene-camera> -->
    <!-- <city-plan></city-plan> -->
    <!-- 图层属性 -->
    <layer-attribute></layer-attribute>
    <!-- 特效 -->
    <air-lines-trail-lines></air-lines-trail-lines>
    <scan-effect></scan-effect>
    <wind-particle></wind-particle>
    <placename-location style="width: 400px; height: 400px; z-index: 999999"></placename-location>
    <click-query style="width: 400px; height: 700px; z-index: 999999"></click-query>
  </div>
</template>

<script>
import clickQuery from "../../Query/clickQuery/clickQuery.vue";
import { GetXzqhTree, GetXzqhGeom } from "@/api/map";
import Bookmark from "../../Bookmark/Bookmark.vue";
export default {
  components: { clickQuery, Bookmark },
  name: "ToolBar",
  props: {},
  data() {
    return {
      last: false,
      sharedState: store.state,
      show: true,
      clickShow: false,
      plan: false,
      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();
        let geoms = res.data
          .substring(res.data.indexOf("(((") + 3, res.data.length - 3)
          .split(")),((");
        for (let i = 0; i < geoms.length; i++) {
          let geom = geoms[i].split(",");
          let points = [];
          for (let j = 0; j < geom.length; j++) {
            points.push(parseFloat(geom[j].split(" ")[0]));
            points.push(parseFloat(geom[j].split(" ")[1]));
          }
          points.push(parseFloat(geom[0].split(" ")[0]));
          points.push(parseFloat(geom[0].split(" ")[1]));
          viewer.entities.add({
            polyline: new Cesium.PolylineGraphics({
              positions: Cesium.Cartesian3.fromDegreesArray(points),
              width: 3,
              material: Cesium.Color.BLUE.withAlpha(0.9),
              clampToGround: true,
            }),
          });
        }
        viewer.flyTo(viewer.entities);
      });
    },
    getXzqTreeData() {
      GetXzqhTree().then((res) => {
        this.xzqTreeData = res.data;
      });
    },
    toggleVisibility() {
      //控制组件界面显隐
      this.show = !this.show;
    },
    choose(i) {
      store.setToolBarAction(i);
    },
  },
  watch: {
    xzqTreeValue(val) {
      viewer.entities.removeAll();
      this.curXzqCode = val[val.length - 1];
      store.setXzqdm(this.curXzqCode);
      if (this.curXzqCode) {
        this.getXzqGeom();
      }
    },
    Skybox() {
      this.setSkyBox();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "toolBar";
</style>