[历史影像]删除之前二维地图，叠加beijing54地图

Jin Lei

2023-11-11 5b5a5a7899a9444665235d96d8d7f2d50fed6a8c

[历史影像]删除之前二维地图，叠加beijing54地图

 src/components/index.vue

@@ -11,22 +11,12 @@
          <img class="searchBtn" src="@/assets/img/right/closeinput1.png" />
        </el-button>
      </div>
      <History />

    </div>
    <viewer1
      class="mapViewer"
      v-if="viewer1Show"
      :style="viewer1Style"
      @mousemove.native="viewer1MouseMove"
    />
    <viewer
      class="mapViewer"
      :style="viewerStyle"
      @mousemove.native="viewerMouseMove"
    />
    <div
      class="controlPanel"
      :style="{
    <viewer1 class="mapViewer" :key="switchKey" v-if="viewer1Show" :style="viewer1Style"
      @mousemove.native="viewer1MouseMove" />
    <viewer class="mapViewer" ref="mapViewer" :style="viewerStyle" @mousemove.native="viewerMouseMove" />
    <div class="controlPanel" :style="{
        width: `${size}`,
        height: `${size}`,
        transform: `scale(${scale}) translate(${offset},${offset})`,
@@ -34,8 +24,7 @@
        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
      }"
    >
    }">
      <img @click="changePwd" id="headlog" src="@/assets/img/new/topBar.png" />
      <img id="bottomBar" src="@/assets/img/new/bottomBar.png" />
      <!-- <el-slider
@@ -69,7 +58,6 @@

import bottommenu from "@/components/menu/bottom-menu";
import { mapState, mapMutations } from "vuex";
import History from "@/components/map/history.vue";

export default {
  name: "index",
@@ -98,6 +86,7 @@
      offset: "0%",
      tooltipInfo: "请稍后。。。",
      tooltipShow: false,
      switchKey: 0,
      // viewer1Show: false,
    };
  },
@@ -108,7 +97,7 @@
    this.size = size + "%";
  },
  computed: {
    ...mapState(["viewer1Show", "yqfk"]),
    ...mapState(["viewer1Show", "isLand", "yqfk"]),
    showSetting() {
      return this.$store.state.showSetting;
    },
@@ -137,6 +126,9 @@
    },
    changePwd() {
      console.log(111);
    },
    changeMode(mode){
      this.$refs.mapViewer.changeMode(mode);
    },
    detectZoom() {
      var ratio = 0,
@@ -242,11 +234,13 @@
.mapViewer {
  height: 100%;
}

.userinfo {
  position: absolute;
  z-index: 20;
  top: 10px;
}

#headlog {
  width: 965px;
  height: 70px;
@@ -255,6 +249,7 @@
  top: 0;
  transform: translate(-50%, 0);
}

#bottomBar {
  width: 1357px;
  height: 52px;
@@ -263,6 +258,7 @@
  bottom: 0;
  transform: translate(-50%, 0);
}

.trigger {
  pointer-events: all;
}
@@ -304,6 +300,7 @@
  border-radius: 10px;
  padding: 10px 30px;
}

.hisbox {
  position: absolute;
  z-index: 10000002;
@@ -311,11 +308,13 @@
  height: 100%;
  background-color: #fff;
}

.btnbox {
  position: absolute;
  z-index: 100000003;
  right: 30px;
}

.btnbox .el-button {
  padding: 0 !important;
  font-size: 24px;

 src/components/left/layerTree/Layer.vue

@@ -1086,7 +1086,7 @@
  height: 30px;
  cursor: pointer;
  text-align: center;
  z-index: 999999;
  z-index: 999;
  color: white;
}
.treeContainer {

 src/components/map/viewer.vue

@@ -1,6 +1,13 @@
<template>
  <div>
    <div id="sdkContainer"></div>
    <div class="listBox" v-show="viewer1Show && !isLand">
      <ul>
        <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
          {{ item }}
        </li>
      </ul>
    </div>
    <layerTreeTwoScreen v-if="layerTreeTwoScreen" />
    <!-- <div id="bottomInfo" v-html="bottomInfo"></div> -->
    <div id="switchImagerLayer" :style="{
@@ -12,7 +19,7 @@
    }">
      <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide"
        enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear>
        <switchImagerLayer v-show="switchImagerLayer" />
        <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
      </transition>

      <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
@@ -35,6 +42,8 @@
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";

let activeLi, nLayer;
export default {
  name: "viewer",
  components: {
@@ -55,10 +64,14 @@
      scale: "1",
      offset: "0%",
      radio: 3,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
    };
  },
  computed: {
    ...mapState(["layerTreeTwoScreen", "cesiumInit"]),
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
  },
  mounted() {
    this.$nextTick(function () {
@@ -67,8 +80,8 @@
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          // StaticFileBaseUrl: "../../../static/CimSDK/",
          StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
        },
        {},
        {},
@@ -228,6 +241,74 @@
      return ratio;
      //this.onresize_height = ratio;
      // return ratio;
    },
    changeMode(mode) {
      this.$refs.switchImagerLayer.switchImagerLayerClick(mode);
    },
    setImageComparison(isStart) {
      this.isImage = isStart;
      if (!this.isImage) {
        this.destroyImageLayer();
      }
    },
    destroyImageLayer() {
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
    },
    changeLeftMap(event, item, index) {
      let liObj = event.currentTarget;
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      liObj.classList.add('active');
      activeLi = liObj;
      this.loadImageLayer(item);
    },
    loadImageLayer(year) {
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
    },
    loadBJ54ImageLayer(year) {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      Viewer.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
    changeImage(val) {
      switch (val) {
@@ -450,6 +531,40 @@
  z-index: -1;
}

.listBox {
  position: absolute;
  left: 20px;
  top: 100px;

}

.listBox .active {

  background: rgba(255, 166, 0, 0.808);

}

.listBox li {
  padding: 2px;
  margin-top: 1px;
  border-radius: 2px;
  color: white;
  background: rgba(14, 50, 143, 0.6);
  font-size: 14px;
  cursor: pointer;
}

/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
  .listBox li {
    font-size: 12px;
  }
}

.listBox li:hover {
  background: rgba(255, 166, 0, 0.808);
}

.mid {
  position: absolute;
  top: 50%;

 src/components/map/viewer1.vue

@@ -1,10 +1,14 @@
<template>
  <div>
    <div id="sdkContainer1" style="height: 100%"></div>
    <layerTreeTwoScreenRight
      v-if="layerTreeTwoScreen"
      id="layerTreeTwoScreen111"
    />
    <div class="listBox" v-show="!isLand">
      <ul>
        <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
          {{ item }}
        </li>
      </ul>
    </div>
    <layerTreeTwoScreenRight v-if="layerTreeTwoScreen" id="layerTreeTwoScreen111" />
    <div class="tdInfo" v-if="showTDinfo">
      <div class="tdInfo_close" @click="tdInfoClose">×</div>
      <p v-if="dikuanxinxi" class="noInfo">暂无该地块信息</p>
@@ -41,12 +45,7 @@
        <div v-else class="title">
          <li>
            企业
            <el-tooltip
              class="item"
              effect="dark"
              content="点击查看企业信息"
              placement="bottom"
            >
            <el-tooltip class="item" effect="dark" content="点击查看企业信息" placement="bottom">
              <a @click="showYZCQY"> {{ qysl }}</a>
            </el-tooltip>
            家
@@ -54,83 +53,31 @@
        </div>
      </ul>
    </div>
    <el-dialog
      class="aboutDialog"
      title="企业信息"
      append-to-body
      width="60%"
      height="60%"
      style="overflow: auto"
      :visible.sync="QYbox"
      :before-close="dialogClose"
    >
    <el-dialog class="aboutDialog" title="企业信息" append-to-body width="60%" height="60%" style="overflow: auto"
      :visible.sync="QYbox" :before-close="dialogClose">
      <div class="el-dialog-div">
        <div class="inquire">
          <el-form
            size="medium"
            ref="queryForm"
            :model="queryForm"
            :inline="true"
          >
          <el-form size="medium" ref="queryForm" :model="queryForm" :inline="true">
            <el-form-item label="查询内容" prop="name">
              <el-input
                v-model="queryForm.content"
                placeholder="请输入查询内容"
              />
              <el-input v-model="queryForm.content" placeholder="请输入查询内容" />
            </el-form-item>
            <el-form-item>
              <el-button
                @click="queryInfo('queryForm')"
                icon="el-icon-search"
                class="primary"
                >查询</el-button
              >
              <el-button @click="queryInfo('queryForm')" icon="el-icon-search" class="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          fit
          style="width: 100%"
          :data="tableData"
          highlight-current-row
        >
        <el-table fit style="width: 100%" :data="tableData" highlight-current-row>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column
            property="企业名称"
            label="企业名称"
          ></el-table-column>
          <el-table-column
            property="企业类型"
            label="企业类型"
          ></el-table-column>
          <el-table-column
            property="成立时间"
            label="成立时间"
          ></el-table-column>
          <el-table-column
            property="所属行业"
            label="所属行业"
          ></el-table-column>
          <el-table-column property="企业名称" label="企业名称"></el-table-column>
          <el-table-column property="企业类型" label="企业类型"></el-table-column>
          <el-table-column property="成立时间" label="成立时间"></el-table-column>
          <el-table-column property="所属行业" label="所属行业"></el-table-column>
          <el-table-column property="法人" label="法人"></el-table-column>
          <el-table-column
            property="注册地址"
            label="注册地址"
          ></el-table-column>
          <el-table-column property="注册地址" label="注册地址"></el-table-column>
        </el-table>
        <div
          slot="footer"
          class="dialog-footer"
          style="text-align: center; margin-top: 5px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            :pager-count="11"
            layout="total, pager"
            :total="searchNum"
          >
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 5px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="10" :pager-count="11" layout="total, pager" :total="searchNum">
          </el-pagination>
        </div>
      </div>
@@ -147,8 +94,7 @@

import Bus from "../tools/Bus";

let line, line1, handler, handler1, divPoint, divPoint1, dx;

let line, line1, handler, handler1, divPoint, divPoint1, dx, activeLi, nLayer, TDLayer;
export default {
  name: "viewer1",
  components: { layerTreeTwoScreenRight },
@@ -179,7 +125,13 @@
      currentPage: 1,
      pageSize: 10,
      searchNum: 0,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
      tableData: [],


      queryForm: {
        type: "企业名称",
        content: "",
@@ -193,7 +145,7 @@

  },
  computed: {
    ...mapState(["viewer1Show", "layerTreeTwoScreen"]),
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen"]),
  },
  watch: {
    viewer1Show: {
@@ -214,6 +166,24 @@
        }, 2000);
      },
    },
    isLand(newvalue, oldvalue) {
      if (!newvalue) {
        if (TDLayer) {
          TDLayer.deleteObject();
          TDLayer = null;
        }
        if (line) {
          sgworld.Creator.DeleteObject(line);
        }
        if (line1) {
          sgworld1.Creator.DeleteObject(line1);
        }
      } else {
        if (!TDLayer) {
          this.loadTDGLLayer();
        }
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
@@ -230,22 +200,6 @@
          },
        },
      };
      // let option = {
      //   url: SmartEarthRootUrl + "Workers/image/earth.jpg",
      //   fullscreenButton: true,
      //   licenseServer: "http://183.162.245.49:18080",
      //   minViewHeight: parseFloat(common.minviewheight),
      //   contextOptions: {
      //     failIfMajorPerformanceCaveat: false,
      //     webgl: {
      //       alpha: true,
      //       preserveDrawingBuffer: true
      //     }
      //   }
      // };

      //EPSG4326
      // Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;

      // 北京
      window.sgworld1 = new SmartEarth.EarthCtrl(
@@ -268,8 +222,119 @@
            true,
            ""
          );
          if (this.isLand) {
            this.loadTDGLLayer();
          }
          var p = {
            destination: sgworld.Navigate.getPosition(),
            orientation: {
              heading: sgworld.Viewer.camera.heading,
              pitch: sgworld.Viewer.camera.pitch,
              roll: sgworld.Viewer.camera.roll,
            },
          };
          sgworld1.Viewer.camera.setView(p);
          setTimeout(() => {
            window.loading && window.loading.close();
          }, 100);
          setTimeout(() => {
            window.APPLoading && window.APPLoading.close();
          }, 100);
        }
      );


      window.Viewer1 = sgworld1._Viewer;
      Viewer1.shadows = false;

      //深度检测
      sgworld1.Analysis.depthTestAgainstTerrain(true);

      //地下模式距离参数
      // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      Viewer1.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer1.scene.globe.undergroundColor = undefined;


      this.addEvent();
    });
    //关闭弹窗
    Bus.$on("closeLandInfoPop", (data) => {
      if (data) {
        this.showTDinfo = false;
      }
    });
  },
  methods: {

    setImageComparison(isStart) {
      this.isImage = isStart;
      if (!this.isImage) {
        this.destroyImageLayer();
      }
    },
    destroyImageLayer() {
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      if (nLayer) {
        Viewer1.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
    },
    changeLeftMap(event, item, index) {
      let liObj = event.currentTarget;
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      liObj.classList.add('active');
      activeLi = liObj;
      this.loadImageLayer(item);
    },
    loadImageLayer(year) {
      if (nLayer) {
        Viewer1.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
    },
    loadBJ54ImageLayer(year) {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      Viewer1.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
    loadTDGLLayer() {
          let treeNode = URLInCode.tdglTmsCode;
          sgworld1.Creator.createImageryProvider(
      TDLayer = sgworld1.Creator.createImageryProvider(
            treeNode.name,
            "tms",
            {
@@ -292,57 +357,13 @@
            ""
          );

          var p = {
            destination: sgworld.Navigate.getPosition(),
            orientation: {
              heading: sgworld.Viewer.camera.heading,
              pitch: sgworld.Viewer.camera.pitch,
              roll: sgworld.Viewer.camera.roll,
            },
          };
          sgworld1.Viewer.camera.setView(p);
          setTimeout(() => {
            window.APPLoading && window.APPLoading.close();
          }, 1000);
        }
      );

      // 合肥
      // window.sgworld1 = new SmartEarth.SGWorld(
      //   "sdkContainer1",
      //   Cesium,
      //   option,
      //   null,
      //   function () {
      //     var p = {
      //       destination: sgworld.Navigate.getPosition(),
      //       orientation: {
      //         heading: sgworld.Viewer.camera.heading,
      //         pitch: sgworld.Viewer.camera.pitch,
      //         roll: sgworld.Viewer.camera.roll,
      //       },
      //     };
      //     sgworld1.Viewer.camera.setView(p);
      //     setTimeout(() => {
      //       window.APPLoading && window.APPLoading.close();
      //     }, 1000);
      //   }
      // );
      window.Viewer1 = sgworld1._Viewer;
      Viewer1.shadows = false;

      //深度检测
      sgworld1.Analysis.depthTestAgainstTerrain(true);

      //地下模式距离参数
      // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      Viewer1.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer1.scene.globe.undergroundColor = undefined;
    addEvent() {
      let type = 0;

      //点击左侧显示范围、详情
      handler1 = new Cesium.ScreenSpaceEventHandler(Viewer1.scene.canvas);
      handler1.setInputAction((event) => {
        if (this.isLand) {
        let that = this;
        this.clearInfoPanel();
        let p;
@@ -506,17 +527,10 @@
              }
            });
        }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    });
    //关闭弹窗
    Bus.$on("closeLandInfoPop", (data) => {
      if (data) {
        this.showTDinfo = false;
      }
    });
  },
  methods: {
    dialogClose() {
      this.queryForm.content = "";
      this.queryForm.type = "企业名称";
@@ -1049,6 +1063,7 @@
  background-size: 100% 100%;
  margin: 0 auto;
}

.tdInfo .title li {
  margin-left: 32px;
  /* width: 78px; */
@@ -1060,6 +1075,7 @@
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content1,
.content2,
.content3 {
@@ -1070,6 +1086,7 @@
  flex-direction: column;
  justify-content: space-between;
}

.content1 li,
.content2 li,
.content3 li {
@@ -1079,14 +1096,17 @@
  line-height: 26px;
  text-shadow: 0px 1px 6px rgba(3, 10, 26, 0.5);
}

.content1 {
  height: 136px;
  padding: 19px 0;
}

.content2 {
  height: 132px;
  padding: 21px 0;
}

.content3 {
  height: 116px;
  padding-top: 21px;
@@ -1218,8 +1238,7 @@
  background-color: rgba(0, 32, 70, 0.7) !important;
}

.aboutDialog .el-dialog-div .dialog-footer {
}
.aboutDialog .el-dialog-div .dialog-footer {}

.el-pagination {
  color: #fff;
@@ -1246,6 +1265,40 @@
  color: #fff;
}

.listBox {
  position: absolute;
  right: 20px;
  top: 100px;

}

.listBox .active {

  background: rgba(255, 166, 0, 0.808);

}

.listBox li {
  padding: 2px;
  margin-top: 1px;
  border-radius: 2px;
  color: white;
  background: rgba(14, 50, 143, 0.6);
  font-size: 14px;
  cursor: pointer;
}

/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
  .listBox li {
    font-size: 12px;
  }
}

.listBox li:hover {
  background: rgba(255, 166, 0, 0.808);
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;

 src/components/menu/bottom-menu.vue

@@ -1,6 +1,6 @@
<template>
  <div class="specialTool">
    <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show }">
    <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show && isLand }">
      <div class="imgbox" @click="tdglHandle">
        <img src="@assets/img/new/tudiguanli.png" alt="" />
      </div>
@@ -9,7 +9,7 @@
      </div>
    </div>

    <div class="bottomwrapper" @click="historyHandle">
    <div class="bottomwrapper" @click="historyHandle" :class="{ 'top-btn-active': viewer1Show && !isLand }">
      <div class="imgbox">
        <img src="@assets/img/new/chengshigengxin.png" alt="" />
      </div>
@@ -25,29 +25,13 @@
        <div class="textbox">
          <span> 综合扩展 </span>
        </div>
        <el-dropdown-menu
          slot="dropdown"
          :append-to-body="false"
          class="popper-dropdown"
        >
          <el-dropdown-item command="stdsjHandle"
            >视图大数据平台</el-dropdown-item
          >
          <el-dropdown-item command="bzdSystem"
            >标准地监管平台</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSPJK" command="spjkHandle"
            >视频集成与可视化</el-dropdown-item
          >
          <el-dropdown-item v-else command="closeSpjk"
            >关闭视频点位分布</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSjxl" command="sjxlHandle"
            >手机信令热力分布</el-dropdown-item
          >
          <el-dropdown-item v-else command="closeSjxl"
            >关闭信令热力分布</el-dropdown-item
          >
        <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
          <el-dropdown-item command="stdsjHandle">视图大数据平台</el-dropdown-item>
          <el-dropdown-item command="bzdSystem">标准地监管平台</el-dropdown-item>
          <el-dropdown-item v-if="isShowSPJK" command="spjkHandle">视频集成与可视化</el-dropdown-item>
          <el-dropdown-item v-else command="closeSpjk">关闭视频点位分布</el-dropdown-item>
          <el-dropdown-item v-if="isShowSjxl" command="sjxlHandle">手机信令热力分布</el-dropdown-item>
          <el-dropdown-item v-else command="closeSjxl">关闭信令热力分布</el-dropdown-item>
          <el-dropdown-item command="csgxHandle">城市更新</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
@@ -60,75 +44,15 @@
        <div class="textbox">
          <span> 精模示范 </span>
        </div>
        <el-dropdown-menu
          slot="dropdown"
          :append-to-body="false"
          class="popper-dropdown"
        >
        <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
          <el-dropdown-item command="fcfhHandle">分层分户</el-dropdown-item>
          <!-- <el-dropdown-item command="sprhHandle">场景视频融合</el-dropdown-item> -->
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui"
            >场景视频融合</el-dropdown-item
          >
          <el-dropdown-item v-else command="jiqirendahui"
            >关闭视频融合</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui">场景视频融合</el-dropdown-item>
          <el-dropdown-item v-else command="jiqirendahui">关闭视频融合</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- <el-tooltip
      class="item"
      effect="dark"
      content="土地管理"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i
        @click="tdglHandle"
        class="iconfont icon-nongcuntudiwenti"
        :class="{ 'top-btn-active': viewer1Show }"
      ></i>
    </el-tooltip>
    <el-tooltip
      class="item"
      effect="dark"
      content="城市部件可视化"
      placement="top"
    >
      <el-dropdown placement="top" @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="qytj">感知设备一张图</el-dropdown-item>
          <el-dropdown-item command="spjkHandle"
            >视频集成与可视化展示</el-dropdown-item
          >
          <el-dropdown-item command="stdsjHandle">
            视频智能分析成果展示</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-tooltip>

   
    <el-tooltip class="item" effect="dark" content="场景浏览" placement="right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-position"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in romanOption"
            :key="item.name"
            @click="setRomanFly(item)"
          >
            {{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-tooltip> -->
    <div class="funcBox" v-if="testSHIPINRONGHE">
      <el-form ref="form" label-width="80px">
        <el-form-item label="四周方向:">
@@ -139,128 +63,33 @@
            @input="updateVideo"
          >
          </el-slider> -->
          <el-slider
            :min="0"
            :max="360"
            v-model="robotVideoList[3].heading"
            @input="updateVideo"
          >
          <el-slider :min="0" :max="360" v-model="robotVideoList[3].heading" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="俯仰角度:">
          <el-slider
            :min="-89"
            :max="89"
            v-model="robotVideoList[3].pitch"
            @input="updateVideo"
          >
          <el-slider :min="-89" :max="89" v-model="robotVideoList[3].pitch" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="水平视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].horizonAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].horizonAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="垂直视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].verticalAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].verticalAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="最远投射:">
          <el-slider
            :min="100"
            :max="300"
            v-model="robotVideoList[3].far"
            @input="updateVideo"
          >
          <el-slider :min="100" :max="300" v-model="robotVideoList[3].far" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="透明度:">
          <el-slider
            :step="0.1"
            :min="0"
            :max="1"
            v-model="robotVideoList[3].alpha"
            @input="updateVideo"
          >
          <el-slider :step="0.1" :min="0" :max="1" v-model="robotVideoList[3].alpha" @input="updateVideo">
          </el-slider>
        </el-form-item>
      </el-form>
    </div>

    <!-- <el-tooltip
      class="item"
      effect="dark"
      content="视图大数据平台"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i @click="stdsjHandle" class="el-icon-data-line"> </i>
    </el-tooltip>
    <el-tooltip
      class="item"
      effect="dark"
      content="土地管理"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i
        @click="tdglHandle"
        class="iconfont icon-nongcuntudiwenti"
        :class="{ 'top-btn-active': viewer1Show }"
      ></i>
    </el-tooltip> -->
    <!-- <el-tooltip
      class="item"
      effect="dark"
      content="数据汇聚"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i
        @click="qytj"
        class="el-icon-pie-chart"
        :class="{ 'top-btn-active': qyEchartsShow }"
      ></i>
    </el-tooltip> -->
    <!-- 
    <el-tooltip
      class="item"
      effect="dark"
      content="场景漫游"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i @click="sceneRoaming()" class="el-icon-position"></i>
    </el-tooltip> -->
    <!-- <el-tooltip
      class="item"
      effect="dark"
      content="视频融合"
      placement="bottom"
      popper-class="item_tooltip"
    >
      <i @click="shipinronghe(videoList)" class="el-icon-position"></i>
    </el-tooltip>
    <div id="scroll" class="scroll_div">
      <ul>
        <li
          v-for="item in romanOption"
          :key="item.name"
          @click="setRomanFly(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div> -->

  </div>
</template>

@@ -277,17 +106,21 @@
  display: flex;
  justify-content: space-between;
}

.specialTool .bottomwrapper:nth-of-type(2),
.specialTool .bottomwrapper:nth-of-type(3) {
  /* background: red; */
  position: relative;
  top: -18px;
}

.bottomwrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.imgbox {
  width: 84px;
  height: 81px;
@@ -295,6 +128,7 @@
  background-size: 100% 100%;
  position: relative;
}

.imgbox img {
  width: 38px;
  position: absolute;
@@ -302,6 +136,7 @@
  left: 52.5%;
  transform: translate(-50%, -50%);
}

.textbox {
  margin-top: 2px;
  width: 100px;
@@ -309,6 +144,7 @@
  background-image: url("~@/assets/img/new/textbg.png");
  background-size: 100% 100%;
}

.textbox span {
  text-align: center;
  display: block;
@@ -319,12 +155,14 @@
  line-height: 28px;
  text-shadow: 0px 2px 2px rgba(32, 32, 32, 0.8);
}

.list {
  position: absolute;
  background: rgba(14, 50, 143, 0.6);
  bottom: 124px;
  box-shadow: 0px 0px 10px 5px rgba(11, 78, 179, 0.7) inset;
}

.list li {
  min-width: 154px;
  height: 35px;
@@ -346,12 +184,15 @@
  width: 155px;
  border: none;
}

.el-dropdown /deep/ .el-dropdown-selfdefine{
  margin-left: 8px !important;
}

.csbj .el-dropdown-menu {
  top: -215px !important;
}

.jxmx .el-dropdown-menu {
  top: -110px !important;
}
@@ -360,9 +201,11 @@
  color: #fff;
  line-height: 35px;
}

.el-dropdown-menu /deep/ .popper__arrow {
  border: none;
}

.csbj .el-popper /deep/ .popper__arrow::after {
  border-top-color: rgba(14, 50, 143, 0.6);
  border-top-width: 6px;
@@ -370,6 +213,7 @@
  top: 201px;
  left: 37px;
}

.jxmx .el-popper /deep/ .popper__arrow::after {
  border-top-color: rgba(14, 50, 143, 0.6);
  border-top-width: 6px;
@@ -410,6 +254,7 @@
.scroll_div li:hover {
  color: #0987ff;
}

.funcBox {
  width: 230px;
  position: absolute;
@@ -455,6 +300,7 @@
          lon: 116.51507,
          lat: 39.79686,
          height: 40,
          isLand: true,
          // 四周方向
          heading: 305,
          // 俯仰角度
@@ -469,63 +315,7 @@
          far: 3000,
          cameraIndexCode: "2b046ef675704975a8d45f1b00cd946b",
        },
        // {
        //   name: "video3",
        //   lon: 116.5146339,
        //   lat: 39.7967196,
        //   height: 80,
        //   // 四周方向
        //   heading: 62,
        //   // 俯仰角度
        //   pitch: -43,
        //   // 水平角度
        //   horizonAngle: 45,
        //   // 垂直角度
        //   verticalAngle: 64,
        //   // 透明度
        //   alpha: 1,
        //   // 透明度
        //   far: 166,
        //   cameraIndexCode: "a0ffb1dedde7468187d0b0f91d431475",
        // },
        // {
        //   name: "video4",
        //   lon: 116.51496,
        //   lat: 39.796854,
        //   height: 80,
        //   // 四周方向
        //   heading: 148,
        //   // 俯仰角度
        //   pitch: -39,
        //   // 水平角度
        //   horizonAngle: 40,
        //   // 垂直角度
        //   verticalAngle: 58,
        //   // 透明度
        //   alpha: 1,
        //   // 透明度
        //   far: 219,
        //   cameraIndexCode: "e6ec9aaf9320455ab6c5ea224f3f5f38",
        // },
        //  {
        //   name: "video1",
        //   lon: 116.51522,
        //   lat: 39.79724,
        //   height: 80,
        //   // 四周方向
        //   heading: 64,
        //   // 俯仰角度
        //   pitch: -47,
        //   // 水平角度
        //   horizonAngle: 30,
        //   // 垂直角度
        //   verticalAngle: 60,
        //   // 透明度
        //   alpha: 1,
        //   // 透明度
        //   far: 166,
        //   cameraIndexCode: "1523335e47a5476f9f65f90f9983e875",
        // },

      ],
      robotVideoList: [
        {
@@ -623,10 +413,10 @@
    };
  },
  computed: {
    ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"]),
    ...mapState(["viewer1Show", "isLand", "yqfk", "qyEchartsShow"]),
  },
  methods: {
    ...mapMutations(["setViewer1Show", "setqyEchartsShow"]),
    ...mapMutations(["setViewer1Show", "setIsLand", "setqyEchartsShow"]),
    showList(index) {
      switch (index) {
        case "csbj":
@@ -676,20 +466,57 @@
          break;
      }
    },
    tdglHandle() {
    historyHandle() {
      if (this.isLand) {
        this.$parent.changeMode('影像底图');
      if (!this.viewer1Show) {
        const loading = this.$loading({
          window.loading = this.$loading({
            lock: true,
            text: "影像对比功能加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
        }
        this.setIsLand(false);
        this.setViewer1Show(true);
      } else {
        if (!this.viewer1Show) {
          this.$parent.changeMode('影像底图');
          window.loading = this.$loading({
            lock: true,
            text: "影像对比功能加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
        }
        this.setIsLand(false);
        this.setViewer1Show(!this.viewer1Show);
      }
    },
    tdglHandle() {
      if (!this.isLand) {
        if (!this.viewer1Show) {
          window.loading = this.$loading({
          lock: true,
          text: "土地管理功能加载中，请稍后",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
        }, 3500);
      }

        this.setIsLand(true);
        this.setViewer1Show(true);
      } else {
        if (!this.viewer1Show) {
          window.loading = this.$loading({
            lock: true,
            text: "土地管理功能加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
        }
        this.setIsLand(true);
      this.setViewer1Show(!this.viewer1Show);
      }
    },
    stdsjHandle() {
      // window.location.href =
@@ -745,9 +572,9 @@
        heatMapItem.deleteObject();
      }
    },
    historyHandle() {
      this.$store.commit("showHistory", true);
    },
    // historyHandle() {
    //   this.$store.commit("showHistory", true);
    // },
    csgxHandle() {
      Bus.$emit("openMyResourcePop", true);
    },

 src/components/right/right-top.vue

@@ -409,6 +409,7 @@
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  z-index: 9999;
}
.transition-box ul li {
  /* min-width: 154px; */

 src/store/index.js

@@ -19,6 +19,7 @@
let store = new Vuex.Store({
  state: {
    viewer1Show: false,
    isLand: true,
    qyEchartsShow: false,
    layerTreeTwoScreen: false,
    yqfk: false,
@@ -52,6 +53,9 @@
    setCesiumInit(state, b) {
      state.cesiumInit = b
    },
    setIsLand(state, b) {
      state.isLand = b;
    },
    setViewer1Show(state, b) {
      state.viewer1Show = b;
    },