优化

lixuliang

2024-03-15 626003e9beb59cf711f59f3b48087300070f121e

 src/components/rightMenu/bottom2.vue

@@ -1,183 +1,108 @@
<template>
  <div class="bottom" id="bottom">
    <div class="mapTools" v-show="show">
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomIn" title="放大">
          <img src="../../../static/img/image/zoomIn.png" />
        </el-button>
  <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
    <div class="mapTool">
      <div class="tool-rotate" @click="flyToCurrentPosition" title="定位">
        <img src="@/assets/img/collection/compass.png" />
      </div>
      <div class="mapTool" v-show="test.fwval">
        <el-button class="tool-rotate" @click="zoomOut" title="缩小">
          <img src="../../../static/img/image/zoomOut.png" />
        </el-button>
    </div>
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
      </div>
    </div>
    <div class="mapTool2">
      <div class="tool-rotate" @click="zoomIn" title="放大">
        <img src="@/assets/img/collection/add.png" />
      </div>
      <div class="border"></div>
      <div class="tool-rotate" @click="zoomOut" title="缩小">
        <img src="@/assets/img/collection/reduce.png" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0.4rem;
  height: 0.76rem;
  right: 0.4rem;
}
.mapModeControl {
  position: absolute;
  right: 0.05rem;
  background: rgba(90, 90, 90, 0.5);
  bottom: 0.05rem;
  height: 0.76rem;
  width: 1.03rem;
  transition: all 1s;
}
.bottom .mapModeControl:hover {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  width: 3.2rem;
}
.mapMode {
  display: inline-block;
}
.mapMode dl {
  width: 0.88rem;
  height: 0.6rem;
  border: 1px solid #494949;
  cursor: pointer;
  margin: 0.08rem;
}

.mapMode dl:hover {
  border-color: #0553b4;
}

.mapMode dl {
  position: relative;
}
#history {
  background: url(../../../static/img/1.png) no-repeat;
}
#mode-3d {
  background: url(../../../static/img/2.png) no-repeat;
}
#mode-2d {
  background: url(../../../static/img/4.png) no-repeat;
}
.mapMode dt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  position: absolute;
  left: 0;
  bottom: 0px;
  font-size: 0.12rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: rgba(0, 0, 0, 0.5);
}
.mapModeActive {
  background: rgba(1, 37, 80, 0.5) !important;
}

.mapTools {
  position: absolute;
  /* bottom: 2rem; */
  bottom: 0.2rem;
  /* right: 0.1rem; */
}
.mapTool {
  margin: 0.1rem 0;
}
.mapTool .el-button {
  padding: 0 !important;
  font-size: 0.24rem;
  border: unset;
  float: unset;
  display: block;
  background: rgba(18, 126, 255, 1);
  width: 0.42rem;
  /* border-radius: 10px; */
  /* background: #ffffff; */
  /* margin-bottom: 8px; */
}

/* .button-group-vertical {
  text-align: center;
  position: relative;
} */
.fgx {
  position: absolute;
  width: 80%;
  height: 1px;
  height: 1px;
  border: 1px solid #dcdfe6;
  z-index: 999;
  margin: 0 10%;
.mapTool .tool-rotate img {
  width: 100%;
}
/* .button-group-vertical .el-button-group > .el-button:first-child {
  border-top-right-radius: 0.04rem !important;
  border-bottom-left-radius: 0px !important;

.mapTool2 {
  width: 0.32rem;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.button-group-vertical .el-button-group > .el-button:last-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.04rem !important;
} */
.mapTool img {
  width: 24px;
  margin: 3px;
  /* height: 0.4rem; */
.mapTool2 .tool-rotate {
  height: 0.33rem;
  line-height: 0.33rem;
}

.mapTool2 .tool-rotate img {
  width: 0.17rem;
}

.border {
  width: 100%;
  height: 1px;
  border: 0.005rem solid #f3f3f3;
}
</style>
    

<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store2";
export default {
  props: ["test"],
  data() {
    return {
      show: true,
      parentdata: {
        fwval: false,
        zbzval: false,
        qpval: false,
        zymlval: false,
        kjcxval: false,
        dxmsval: false,
        snmsval: false,
        ssval: false,
      state1: store.mapTools,
      state: store.layerPanel,
      customStyle: {
        position: "absolute",
        bottom: "0.4rem",
        right: "0.1rem",
      },
      clickIndex: 0,
      // isShowHistory: false,
      camera: {
        position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
        orientation: {
          heading: 0,
          pitch: -90,
          roll: 0,
        },
      },
      modes: [
        {
          id: "mode-3d",
          name: "3D",
          mode: 3,
        },
        {
          id: "mode-2d",
          name: "2D",
          mode: 2,
        },
      ],
    };
  },
  mounted() {
    Bus.$on("myMsg", (myMsg) => {
      this.show = myMsg;
    });
  mounted() {},
  watch: {
    "state.show": {
      handler(newVal) {
        if (newVal) {
          this.customStyle = {
            position: "absolute",
            top: "calc(0.75rem + 51px)",
            right: "0.1rem",
          };
        } else {
          this.customStyle = {
            position: "absolute",
            bottom: "0.4rem",
            right: "0.1rem",
          };
        }
      },
      immediate: true,
    },
  },
  methods: {
    zoomIn() {
      const view = window.mapapi.getView();
      const zoom = view.getZoom();

      map.getView().animate({
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        zoom: zoom + 1, // 缩放级别
@@ -188,8 +113,7 @@
    zoomOut() {
      const view = window.mapapi.getView();
      const zoom = view.getZoom();

      map.getView().animate({
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        zoom: zoom - 1, // 缩放级别
@@ -197,6 +121,24 @@
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    flyBack() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 中心点
        zoom: 12, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    flyToCurrentPosition() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.personalPoi, // 中心点
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1500, // 缩放持续时间，默认不需要设置
      });
    },
  },
};
</script>