YOUHAU

lixuliang

2024-03-22 5206e7a4f4c5b71c9ddeccdbbe5e7fba5b3eeb9b

 src/components/rightMenu/bottom2.vue

@@ -1,11 +1,16 @@
<template>
  <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>
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
      </div>
    </div>
    <div class="mapTool" v-show="test.fwval">
    <div class="mapTool2">
      <div class="tool-rotate" @click="zoomIn" title="放大">
        <img src="@/assets/img/collection/add.png" />
      </div>
@@ -19,25 +24,43 @@

<style scoped>
.mapTool {
  border-radius: 10px;
  width: 0.42rem;
  /* border-radius: 10px; */
  /* background: #ffffff; */
  /* margin-bottom: 8px; */
}

.mapTool .tool-rotate img {
  width: 100%;
}

.mapTool2 {
  width: 0.32rem;
  margin: auto;
  background: #ffffff;
  margin-bottom: 8px;
  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;
}
.mapTool2 .tool-rotate {
  height: 0.33rem;
  line-height: 0.33rem;
}

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

.border {
  border: 0.5px solid #efecec;
}

.tool-rotate {
  padding: 8px;
}

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

<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store2";
@@ -45,7 +68,7 @@
  props: ["test"],
  data() {
    return {
      state1:store.mapTools,
      state1: store.mapTools,
      state: store.layerPanel,
      customStyle: {
        position: "absolute",
@@ -61,7 +84,7 @@
        if (newVal) {
          this.customStyle = {
            position: "absolute",
            top: "2rem",
            top: "calc(0.75rem + 51px)",
            right: "0.1rem",
          };
        } else {
@@ -82,6 +105,7 @@
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        projection: "EPSG:3857",
        zoom: zoom + 1, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
@@ -93,6 +117,7 @@
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        projection: "EPSG:3857",
        zoom: zoom - 1, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
@@ -101,12 +126,23 @@
    flyBack() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: [116.52217697339846, 39.75979421847914], // 中心点
        center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 中心点
        projection: "EPSG:3857",
        zoom: 12, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    flyToCurrentPosition() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.personalPoi, // 中心点
        projection: "EPSG:3857",
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1500, // 缩放持续时间，默认不需要设置
      });
    },
  },
};
</script>