数字人更新

lixuliang

2024-05-08 10ecfd0b60442d209d1ab4b749580ffb638d1992

 src/components/right/right-bottom.vue

@@ -5,12 +5,133 @@
        <el-tooltip
          class="item"
          effect="dark"
          content="数字人"
          placement="left"
          popper-class="item_tooltip"
        >
          <div
            class="legend-bg"
            @click="showDigitalPerson"
            :class="{ active: isShowDP }"
          >
            <img class="legendImg" src="@/assets/img/new/数字人.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="亦庄新区范围"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="maskingOut">
            <img class="legendImg" src="@/assets/img/new/mengbanbai.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="图例"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="showLegendPop">
            <img class="legendImg" src="@/assets/img/new/legend.png" />
          </div>
        </el-tooltip>
      </div>
      <!-- <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="视角切换"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="fovViewer">
            <img class="dwImg" src="@/assets/img/new/location.png" />
          </div>
        </el-tooltip>
      </div> -->
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="复位"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="flyBack">
            <img class="fwImg" src="@/assets/img/new/fuwei.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="指北"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="trueNorth">
            <img class="zbImg" src="@/assets/img/new/zhibei.png" />
          </div>
        </el-tooltip>
      </div>
      <!-- <div class="mapTool" v-if="isActive">
        <el-tooltip
          class="item"
          effect="dark"
          content="全屏"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="fullScreen">
            <img src="@/assets/img/new/quanping.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool" v-else>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出全屏"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg tcqp" @click="fullScreen">
            <img class="qpImg" src="@/assets/img/new/tuichuquanping.png" />
          </div>
        </el-tooltip>
      </div> -->
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="放大"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="zoomIn">
            <img class="fdImg" src="@/assets/img/new/zoomIn.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="缩小"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="zoomOut">
            <img class="sxImg" src="@/assets/img/new/zoomOut.png" />
          </div>
        </el-tooltip>
      </div>
@@ -40,125 +161,6 @@
          </div>
        </el-tooltip>
      </div> -->

      <!-- <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="超图"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="S3M()">
            <img class="legendImg" src="@/assets/img/new/mengban.png" />
          </div>
        </el-tooltip>
      </div> -->

      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="图例"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="showLegendPop">
            <img class="legendImg" src="@/assets/img/new/legend.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="视角切换"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="fovViewer">
            <img class="dwImg" src="@/assets/img/new/location.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="复位"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="flyBack">
            <img class="fwImg" src="@/assets/img/new/fuwei.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="指北"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="trueNorth">
            <img class="zbImg" src="@/assets/img/new/zhibei.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool" v-if="isActive">
        <el-tooltip
          class="item"
          effect="dark"
          content="全屏"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="fullScreen">
            <img src="@/assets/img/new/quanping.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool" v-else>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出全屏"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg tcqp" @click="fullScreen">
            <img class="qpImg" src="@/assets/img/new/tuichuquanping.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="放大"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="zoomIn">
            <img class="fdImg" src="@/assets/img/new/zoomIn.png" />
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
          content="缩小"
          placement="left"
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="zoomOut">
            <img class="sxImg" src="@/assets/img/new/zoomOut.png" />
          </div>
        </el-tooltip>
      </div>
      <!-- <div class="mapTool">
        <el-tooltip class="item" effect="dark" content="二三维切换" placement="left">
          <el-button class="tool-23mode" @click="_23mode">
@@ -211,25 +213,24 @@
.trigger {
  pointer-events: all;
}
.mapTools {
  /* margin-bottom: 58px; */
}

.mapTool {
  margin: 2px 0;
}
.legend-bg:hover {
  background-image: url("~@/assets/img/new/leftCircle-y.png");
}
.legend-bg {
  background-image: url("~@/assets/img/new/leftCircle.png");
  background-size: 100%;
  background-color: transparent;
  width: 54.5px;
  height: 54.5px;
  width: 35px;
  height: 35px;
  position: relative;
}
.legend-bg:hover {
  background-color: rgba(16, 145, 250, 0.4);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
}
.active {
  background-image: url("~@/assets/img/new/leftCircle-y.png");
}
.tcqp {
  background-color: rgba(0, 138, 252, 0.6);
@@ -238,8 +239,8 @@
/* 
.mapTool .el-button {
  padding: 0 !important;
  width: 54.5px;
  height: 54.5px;
  width:  30px;
  height:  30px;
  border: unset;
  float: unset;
  display: block;
@@ -253,7 +254,7 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  width: 20px;
}

.button-group-vertical {
@@ -331,6 +332,8 @@
    return {
      isWideAngle: false,
      wideAngle: 1.04,
      isShowDP: false,
      isShowTA: false,
      clickIndex: 0,
      camera: {
        position: [116.540659, 39.744945, 50000],
@@ -370,32 +373,18 @@
    Bus.$off("closeLegendPop");
  },
  methods: {
    qingqiu() {
      $.ajax({
        url: "http://10.117.5.21/artemis/api/resource/v1/cameras/indexCode",
        type: "POST",
        dataType: "json",
        data: {
          cameraIndexCode: "57533537f16d4cb9a151cf1527b16798",
        },
        contentType: "application/json",
        headers: {
          "x-ca-key": 20380928,
          "x-ca-signature-headers": "x-ca-key",
          "x-ca-signature": "IVKr1h18tQGUyxsarkSJCyjO2b0BrBQghc5Bga3V3O8=",
        },
        success: function (result) {
          console.log(result);
        },
      });
    },
    // 相机参数

    getcamera() {
      let p = sgworld.Navigate.getCameraInfo();
      console.log(p);
    },

    showDigitalPerson() {
      this.isShowDP = !this.isShowDP;
      this.$store.commit("showDigitalPerson", this.isShowDP);
      if (!this.isShowDP) {
        this.$store.commit("showTextArea", false);
      }
    },
    maskingOut() {
      if (!window.maskinglayer) {
        window.maskinglayer = sgworld.Creator.createImageryProvider(