综合展示图层管理图标切换

Surpriseplus

2023-02-14 c1514cfc69b679d05398bb1def6b24c772426aa0

 src/components/mapol.vue

@@ -9,16 +9,35 @@
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>

    </div>
    <div v-show="$store.state.isNaviget"  class="sindagis-map-compass">
      <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>

<script>

import { easeOut } from 'ol/easing'
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
import Map from "ol/Map"
import View from "ol/View"
import { transform } from "ol/proj"

import {
  OverviewMap,
  defaults as defaultControls,
@@ -37,6 +56,8 @@
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
      rotate: 0,
      currentDir: ''
    }
  },
  mounted() {
@@ -64,10 +85,20 @@
        }),
        controls: defaultControls().extend([
          new FullScreen(),
          new ScaleLine(),
          
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })
      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
      // map.addControl(scaleLine);

      map.on("moveend", function (e) {
        console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
        // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
      });

    },

    changeMenulayer() {
@@ -84,11 +115,54 @@
        map.getLayers().item(1).setVisible(false)
      }
    },
    leftClick() {
      var view = map.getView();
      var center = map.getView().getCenter();
      var rotation = map.getView().getRotation();
      rotation = rotation - Math.PI / 2
      this.rotate -= 90
      view.animate({
        center: center,                                            //旋转中心点
        rotation: rotation,
        easing: easeOut                               //旋转速度
      })
      this.currentDir = 'left'
    },
    recoveryClick() {
      var view = map.getView();
      var center = map.getView().getCenter();
      let a = this.rotate % 360 // -270
      if (a != 0) { // 复位
        let dis = 360 - Math.abs(a)
        let dis1 = Math.abs(a)
        dis = dis > dis1 ? dis1 : dis
        if (dis == 180) dis = -180
        this.rotate = (this.rotate + dis) % 360 == 0 ? this.rotate + dis : this.rotate - dis
      }
      view.animate({
        center: center,
        rotation: 0,
        easing: easeOut
      })
    },
    rightClick() {
      var view = map.getView();
      var center = map.getView().getCenter();
      var rotation = map.getView().getRotation();
      rotation = rotation + Math.PI / 2
      this.rotate += 90
      view.animate({
        center: center,
        rotation: rotation,
        easing: easeOut
      })
      this.currentDir = 'right'
    },
  },
}
</script>

<style scoped>
<style lang="scss" scoped>
#mapol {
  width: 100%;
  height: 100%;
@@ -147,4 +221,64 @@
  background-size: 100% 100%;
  border-radius: 5px;
}
.ol-scale-line {
  bottom: 55px !important;
}

.sindagis-map-compass {
  position: absolute;
  right: 50px;
  bottom: 90px;
  z-index: 5;
  right: 25px;
  width: 52px;
  height: 54px;
  background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat;
}

.sindagis-map-compass .left,
.sindagis-map-compass .center,
.sindagis-map-compass .right {
  position: absolute;
  outline: none;
  border: none;
  cursor: pointer;
  opacity: 1;
}

.sindagis-map-compass .left {
  background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
  left: 2px;
  top: 5px;
  z-index: 1;
  width: 15px;
  height: 42px;
}

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

.sindagis-map-compass .center {
  background: url("../assets/img/compass.png") -56px -4px / 266px no-repeat;
  left: 19px;
  top: 4px;
  width: 14px;
  height: 44px;
  transform: rotate(0deg);
  transition: 1s;
}
.sindagis-map-compass .right {
  background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
  right: 2px;
  top: 5px;
  z-index: 1;
  width: 15px;
  height: 42px;
  transform: scaleX(-1);
}
.sindagis-map-compass .right:hover {
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}

</style>