综合展示样式修改

584911253@qq.com

2023-02-26 2364c314288f26a4d29b7d22e9baa1e45f43aaeb

 src/components/mapol.vue

@@ -1,16 +1,32 @@
<template>
  <div id="mapol">
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
    <div style="display: flex">
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
          @click="changeMenulayer"
          class="center CenDiv"
          :class="{ center1: centerFlag }"
      >
        <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>

      </div>
      <div @click="changeMapType" class="changeMapType">
        <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
      </div>
    </div>
<!--    <div-->
<!--      @click="changeMenulayer"-->
<!--      class="center CenDiv"-->
<!--      :class="{ center1: centerFlag }"-->
<!--    >-->
<!--      <div-->
<!--        id="cenBg"-->
<!--        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
<!--      ></div>-->

<!--    </div>-->
    <div v-show="$store.state.isNaviget"  class="sindagis-map-compass">
      <span
        class="left"
@@ -57,11 +73,15 @@
      isActive: true,
      isMenuLayer: false,
      rotate: 0,
      currentDir: ''
      currentDir: '',
      show2DMap:false,
    }
  },
  mounted() {
    this.init2DMap()
    this.init2DMap();
    this.$bus.$on('changemapType', (e) => {
      this.show2DMap = e;
    });
  },
  methods: {
    init2DMap() {
@@ -85,7 +105,7 @@
        }),
        controls: defaultControls().extend([
          new FullScreen(),
          

        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })
@@ -99,6 +119,21 @@
        // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
      });

    },

    //二维/三维地图切换
    changeMapType(){
      // debugger
      this.show2DMap = !this.show2DMap;
      //二维
      if (this.show2DMap){
        this.$bus.$emit("changemap", 2);
      }
      //三维
      else {
        this.$bus.$emit("changemap", 3);
      }
      this.$bus.$emit("changemapType", this.show2DMap);
    },

    changeMenulayer() {
@@ -281,4 +316,36 @@
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}

.changeMapType{
  position: absolute;
  bottom: 1%;
  left: calc(1% + 75px);
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 6px #666;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.mapTypeTwo{
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/3dmap.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree{
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/2dmap.png");
  background-repeat: no-repeat;
  background-size: contain;
}

</style>