北京经济技术开发区经开区虚拟城市项目-【前端】-Web
Jin Lei
2023-11-15 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef
src/components/right/right-bottom.vue
@@ -1,7 +1,7 @@
<template>
  <div class="rightBottom trigger" id="rightBottom">
    <div class="mapTools">
      <!-- <div class="mapTool">
      <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
@@ -10,38 +10,10 @@
          popper-class="item_tooltip"
        >
          <div class="legend-bg" @click="maskingOut">
            <img class="legendImg" src="@/assets/img/new/mengban.png" />
            <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="getcamera">
            <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="S3M()">
            <img class="legendImg" src="@/assets/img/new/mengban.png" />
          </div>
        </el-tooltip>
      </div> -->
      </div>
      <div class="mapTool">
        <el-tooltip
          class="item"
@@ -55,7 +27,7 @@
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool">
      <!-- <div class="mapTool">
        <el-tooltip
          class="item"
          effect="dark"
@@ -67,7 +39,7 @@
            <img class="dwImg" src="@/assets/img/new/location.png" />
          </div>
        </el-tooltip>
      </div>
      </div> -->
      <div class="mapTool">
        <el-tooltip
          class="item"
@@ -94,7 +66,7 @@
          </div>
        </el-tooltip>
      </div>
      <div class="mapTool" v-if="isActive">
      <!-- <div class="mapTool" v-if="isActive">
        <el-tooltip
          class="item"
          effect="dark"
@@ -119,7 +91,7 @@
            <img class="qpImg" src="@/assets/img/new/tuichuquanping.png" />
          </div>
        </el-tooltip>
      </div>
      </div> -->
      <div class="mapTool">
        <el-tooltip
          class="item"
@@ -146,6 +118,32 @@
          </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="screenShot">
            <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="getcamera">
            <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">
          <el-button class="tool-23mode" @click="_23mode">
@@ -198,25 +196,21 @@
.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;
}
.tcqp {
  background-color: rgba(0, 138, 252, 0.6);
@@ -225,8 +219,8 @@
/* 
.mapTool .el-button {
  padding: 0 !important;
  width: 54.5px;
  height: 54.5px;
  width:  30px;
  height:  30px;
  border: unset;
  float: unset;
  display: block;
@@ -240,7 +234,7 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  width: 20px;
}
.button-group-vertical {
@@ -384,28 +378,32 @@
    },
    maskingOut() {
      // if (!window.maskinglayer) {
      //   window.maskinglayer = sgworld.Creator.createImageryProvider(
      //     "蒙版",
      //     "wms",
      //     {
      //       url: "http://10.10.4.116:8070/gisserver/wmsserver/WaiWeiMengBan",
      //       layers: "",
      //       parameters: {
      //         format: "image/png",
      //         transparent: true,
      //         alpha: 1,
      //       },
      //     },
      //     "0",
      //     15, //zindex
      //     true,
      //     ""
      //   );
      // } else {
      //   window.maskinglayer.deleteObject();
      //   window.maskinglayer = null;
      // }
      if (!window.maskinglayer) {
        window.maskinglayer = sgworld.Creator.createImageryProvider(
          "蒙版",
          "wms",
          {
            url: "http://10.10.4.121:8070/gisserver/wmsserver/WaiWeiMengBan",
            layers: "",
            parameters: {
              format: "image/png",
              transparent: true,
              alpha: 1,
            },
          },
          "0",
          15, //zindex
          true,
          ""
        );
      } else {
        window.maskinglayer.deleteObject();
        window.maskinglayer = null;
      }
    },
    screenShot() {
      sgworld.tools.browse();
      sgworld.Analysis.createScreenshot();
    },
    S3M() {
      var promise = Viewer.scene.open(