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

Jin Lei

2023-11-11 5b5a5a7899a9444665235d96d8d7f2d50fed6a8c

 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{

.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() {
      if (!this.viewer1Show) {
        const loading = this.$loading({
          lock: true,
          text: "土地管理功能加载中，请稍后",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
        }, 3500);
    historyHandle() {
      if (this.isLand) {
        this.$parent.changeMode('影像底图');
        if (!this.viewer1Show) {
          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);
      }

      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)",
          });
        }
        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);
    },