页面修改

surprise

2023-12-19 fd73e99196e00c82885c83ee2f1253c2fc343756

 src/components/mapol.vue

@@ -1,7 +1,7 @@
<template>
  <div id="mapol">
    <div style="display: flex">
      <div
      <!-- <div
        @click="changeMenulayer"
        class="changeLayer"
        style="  position: absolute;
@@ -22,14 +22,10 @@
          class="mapBaseMap"
        ></div>

      </div>
      <div
        @click="changeMapType"
        class="changeMapType"
        v-if="$store.state.setChangeBaseMap"
        style="  position: absolute;
      </div> -->
      <div @click="changeMapType" class="changeMapType" v-if="$store.state.setChangeBaseMap" style="  position: absolute;
        
  bottom: 52px;
  bottom: 84px;
  right: 46px;
  height: 30px;
  width: 30px;
@@ -38,13 +34,8 @@
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);"
      >
        <div
          title="2/3维切换"
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
  border: 1px solid rgba(255, 255, 255, 0.5);">
        <div title="2/3维切换" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
      </div>
    </div>
    <!--    <div-->
@@ -58,23 +49,10 @@
    <!--      ></div>-->

    <!--    </div>-->
    <div
      class="sindagis-map-compass"
      style=" bottom: 130px; right: 40px;"
    >
      <span
        class="left"
        @click="leftClick"
      ></span>
      <span
        class="center"
        @click="recoveryClick"
        :style="{transform: `rotate(${rotate}deg)`}"
      ></span>
      <span
        class="right"
        @click="rightClick"
      ></span>
    <div class="sindagis-map-compass" style=" bottom: 130px; right: 40px;">
      <span class="left" @click="leftClick"></span>
      <span class="center" @click="recoveryClick" :style="{ transform: `rotate(${rotate}deg)` }"></span>
      <span class="right" @click="rightClick"></span>
    </div>
  </div>
</template>
@@ -205,7 +183,7 @@
    },

    changeMenulayer() {
      this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true})
      this.$bus.$emit("setChangeBaseMapLayer", { type: 'ol', boolen: true })
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
@@ -275,9 +253,11 @@
  padding: 0;
  position: relative;
}

.center {
  left: 1%;
}

.CenDiv {
  position: absolute;
  bottom: 1%;
@@ -292,9 +272,11 @@
  border-radius: 5px;
  cursor: pointer;
}

.center1 {
  right: 1%;
}

.right {
  position: absolute;
  top: 50px;
@@ -306,6 +288,7 @@
  flex-direction: column;
  justify-content: space-between;
}

// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
@@ -317,6 +300,7 @@
  background-size: 100% 100%;
  border-radius: 5px;
}

.menuLayer {
  width: 100%;
  height: 100%;
@@ -325,6 +309,7 @@
  background-size: 100% 100%;
  border-radius: 5px;
}

.ol-scale-line {
  bottom: 55px !important;
  right: 130px !important;
@@ -371,6 +356,7 @@
  transform: rotate(0deg);
  transition: 1s;
}

.sindagis-map-compass .right {
  background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
  right: 2px;
@@ -380,9 +366,11 @@
  height: 42px;
  transform: scaleX(-1);
}

.sindagis-map-compass .right:hover {
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}

.mapBaseMap {
  width: 100%;
  height: 100%;
@@ -392,8 +380,9 @@
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
}

.changeMapType {}

.mapTypeTwo {
  width: 100%;
  height: 100%;
@@ -403,6 +392,7 @@
  background-repeat: no-repeat;
  background-size: contain;
}

.mapTypeThree {
  width: 100%;
  height: 100%;
@@ -412,6 +402,6 @@
  background-repeat: no-repeat;
  background-size: contain;
}
.changeLayer {
}

.changeLayer {}
</style>