代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/views/Thematic/index.vue

@@ -1,583 +1,156 @@
<template>
  <div class="themaic">
    <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          ref="tree"
          @check-change="handleCheckChange"
        >
        </el-tree>
      </div>
    <mapsdk></mapsdk>
    <top class="title"
         ref="title"></top>
    <left class="mapleft"
          :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
          ref="mapleft"></left>

      <div class="changeBaseLayer">
        <div @click="changeMenulayer" class="CenDiv">
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </div>
    </div>
    <div class="center_content">
      <div id="MapView" class="MapView">
        <div class="leftEchart" v-show="openEcharts">
          <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
          <echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
          <echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
          <echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
          <echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
          <echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
          <echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
          <echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
          <echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
          <echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
          <echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
          <echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
        </div>
        <div class="rightEchart" v-show="openEcharts">
          >
          <echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
          <echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
          <echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
          <echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
          <echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
          <echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
          <echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
          <echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
          <echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
          <echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
          <echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
          <echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
        </div>
        <div class="left_content">
          <div v-show="leftMenuOpen" @click="showLeftMenu">
            <i style="color: white" class="el-icon-caret-left"></i>
          </div>
          <div v-show="!leftMenuOpen" @click="showLeftMenu">
            <i style="color: white" class="el-icon-caret-right"></i>
          </div>
        </div>
        <div class="right_content">
          <div v-show="!rightMenuOpen" @click="showRightMenu">
            <i style="color: white" class="el-icon-caret-left"></i>
          </div>
          <div v-show="rightMenuOpen" @click="showRightMenu">
            <i style="color: white" class="el-icon-caret-right"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
      <div class="content_right">
        <ul>
          <li
            @click="changeRightList(item)"
            v-for="item in rightList"
            :class="item.id == changeSelectli ? 'changeliStyle' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="bottom_right">
        <div
          v-for="item in rightMenu"
          class="right_item"
          :class="{ changeStyle: changeSelectStyle == item.id }"
          @click="changeRightMenu(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <project-tree class="project-tree"
                  v-show="ProjectreeDisplay"></project-tree>

    <right class="mapright"
           :style="{ width: rightWidth }"
           ref="mapright"></right>
    <bottom class="mapbottom"
            ref="mapbottom"></bottom>
  </div>
</template>

<script>
import mapsdk from '../../components/mapsdk.vue';
import { right_menu, right_list, image_layer } from './index.js';
import echart11 from '../../components/echart11.vue';
import echart12 from '../../components/echart12.vue';
import echart13 from '../../components/echart13.vue';
import echart14 from '../../components/echart14.vue';
import echart15 from '../../components/echart15.vue';
import echart16 from '../../components/echart16.vue';
import echart21 from '../../components/echart21.vue';
import echart22 from '../../components/echart22.vue';
import echart23 from '../../components/echart23.vue';
import echart24 from '../../components/echart24.vue';
import echart25 from '../../components/echart25.vue';
import echart26 from '../../components/echart26.vue';
import echart31 from '../../components/echart31.vue';
import echart32 from '../../components/echart32.vue';
import echart33 from '../../components/echart33.vue';
import echart34 from '../../components/echart34.vue';
import echart35 from '../../components/echart35.vue';
import echart36 from '../../components/echart36.vue';
import echart41 from '../../components/echart41.vue';
import echart42 from '../../components/echart42.vue';
import echart43 from '../../components/echart43.vue';
import echart44 from '../../components/echart44.vue';
import echart45 from '../../components/echart45.vue';
import echart46 from '../../components/echart46.vue';
import axios from 'axios';
import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"
import ProjectTree from "../../components/Screen/ProjectTree.vue"
import axios from "axios"
export default {
  components: {
    mapsdk,
    echart11,
    echart12,
    echart13,
    echart14,
    echart15,
    echart16,
    echart21,
    echart22,
    echart23,
    echart24,
    echart25,
    echart26,
    echart31,
    echart32,
    echart33,
    echart34,
    echart35,
    echart36,
    echart41,
    echart43,
    echart42,
    echart44,
    echart45,
    echart46,
  },
  data() {
  components: { mapsdk,top,left,right,bottom,ProjectTree },
  data () {
    return {
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
      openEcharts: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
      leftWidth: "22%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false,
      ProjectreeDisplay: false,
    }
  },
  mounted() {
    this.treeData = image_layer;
    this.rightList = right_list[0];
    this.rightMenu = right_menu;
    this.changeSelectli = this.rightList[0].id;
    this.changeSelectStyle = this.rightMenu[0].id;
    this.initMapView();
    this.addImageLayer();
  mounted () {

  },
  created() {},
  created () {
    this.$bus.$on("changeTree",key => {
      this.ProjectreeDisplay=key
    })
  },
  methods: {
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
        var layer = res.layer;
        this.$refs.tree.setCheckedKeys(layer);
      }
      if (res.index != null) {
        this.openEcharts = true;
        this.typeIndex = res.index;
      } else {
        this.openEcharts = false;
        this.typeIndex = null;
      }
      var vid = res.id;

      if (vid.indexOf('b') != -1) {
        var url = geoserverWFS + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            var point = res.data.features[0].geometry.coordinates;
            //定位
            MapViewer.camera.flyTo({
              //跳转视角
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //定位
        MapViewer.camera.flyTo({
          //跳转视角
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
      } else if (vid.indexOf('c') != -1) {
        var url = geoserverWFSLine + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            if (res.data.features.length == 0) return;
            var std = [];
            for (var i in res.data.features) {
              var featurLayer = res.data.features[i];
              var path = featurLayer.geometry.coordinates[0];
              for (var j in path) {
                std.push(path[j][0], path[j][1], 50);
              }
            }
            this.showPathLine(std);
          }
        });
      }
    },
    showPathLine(res) {
      sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        // 弹窗数据
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: '路径动画',
          shade: false,
          area: ['352px', '690px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
    showLeftMenu() {
      this.leftMenuOpen = !this.leftMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
    //修改左侧宽度
    ChangeWidth (parm) {
      if(parm=="left") {
        if(this.leftWidth=="22%") {
          this.leftWidth="8px"
        } else {
          this.leftWidth="22%"
        }
      }, 100);
    },
    showRightMenu() {
      this.rightMenuOpen = !this.rightMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      window.sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      window.MapViewer = window.sgworld._Viewer;

      //定位
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          116.3911,
          39.9115,
          100000
        ),
      });

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );
      //显示fps
      MapViewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      window.sgworld.navControl('nav', false);
      //比例尺
      window.sgworld.navControl('scale', false);
    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        MapViewer.imageryLayers.get(2).show = true;
        MapViewer.imageryLayers.get(1).show = false;
      } else {
        MapViewer.imageryLayers.get(2).show = false;
        MapViewer.imageryLayers.get(1).show = true;
      }
    },
    addImageLayer() {
      var val_layer = this.treeData[0].children;
      var std = [];
      for (var i = 0; i < val_layer.length; i++) {
        let layerWMS = new Cesium.WebMapServiceImageryProvider({
          url: geoServerURl,
          layers: val_layer[i].resource,
          parameters: {
            transparent: true,
            format: 'image/png',
          },
        });
        layerWMS.name = val_layer[i].label;
        window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
        std.push(val_layer[i].id);

      if(parm=="leftView"||parm=="leftTree") {
        this.leftWidth="22%"
        this.rightWidth="22%"
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
        var val_id =
          window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          const img_layer = window.MapViewer.imageryLayers._layers[i];
          img_layer.show = checked;
      // if (parm == "leftView") {
      //   this.leftTree = false
      // }
      // if (parm == "leftTree") {
      //   this.leftTree = true
      // }

      if(parm=="right") {
        if(this.rightWidth=="22%") {
          this.rightWidth="45px"
        } else {
          this.rightWidth="22%"
        }
      }
    },
  },
};
}
</script>

<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  background: #303030;
  position: relative;
  width: 100%;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: #133a5f;
    .tree-container {
      margin: 10px;
    }
}

    .changeBaseLayer {
      width: 100%;
      height: 80px;
      margin-top: calc(190% - 10px);
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      .CenDiv {
        height: 40px;
        width: 60px;
        margin: 2%;
        border-radius: 5px;
      }
      .CenDiv:hover {
        border: 1px solid #409eff;
      }
      .active {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
      .menuLayer {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
    }
  }
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      float: left;
      position: relative;
      .leftEchart {
        z-index: 60;
        position: absolute;
        height: 100%;
        width: 20%;
        margin-left: 1.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .rightEchart {
        z-index: 60;
        position: absolute;
        height: 100%;
        width: 20%;
        right: 0;
        opacity: 0.5;
        margin-right: 1.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .right_content {
        width: 10px;
        height: 100%;
        z-index: 60;
        display: flex;
        align-items: center;
        right: 0;
        position: absolute;
        padding: 0px 5px;
      }
      .left_content {
        width: 10px;
        height: 100%;
        z-index: 60;
        left: 0;
        position: absolute;
        display: flex;
        align-items: center;
        padding: 0px 5px;
      }
    }
  }
  .item_menu {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .left_main_show {
    width: 0;
  }
  .right_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: #133a5f;
.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  z-index: 999;
}

    .content_right {
      width: calc(100% -20px);
      height: 95%;
      li {
        border-bottom: 1px solid white;
        padding: 10px 10px;
        color: white;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #409eff;
      }
    }
.mapleft {
  position: absolute;
  top: 90px;
  left: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

    .bottom_right {
      width: 100%;
      height: 5%;
      display: flex;
      position: relative;
      .right_item {
        align-items: center;
        display: flex;
        height: calc(100% - 2px);
        flex-grow: 1;
        justify-content: center;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: white;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
        border-left: 1px solid white;
      }
    }
    .changeStyle {
      background: #409eff;
    }
  }
.mapright {
  position: absolute;
  top: 90px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

  .right_main_show {
    width: 0;
  }
  .echart1 {
    width: 88%;
    height: 27%;
    border: 3px solid rgba(204, 204, 204, 0.76);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
  }
.mapbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  z-index: 999;
}
.project-tree {
  position: absolute;
  top: 90px;
  right: 22%;
  width: 15%;
  height: calc(100% - 180px);
  z-index: 999;
}
</style>

  /deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // 不可全选样式
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
<style lang="less">
.themaic {
  .aside-title {
    box-sizing: border-box;
    padding-left: 30px;
    // height: 27px;
    // line-height: 27px;
    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    // -webkit-background-clip: text;
    color: #fff;
    width: 100%;

    height: 30px;
    line-height: 30px;
    background: url(~@/assets/img/Screen/asideTitleBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>