YOUHAU

lixuliang

2024-03-22 5206e7a4f4c5b71c9ddeccdbbe5e7fba5b3eeb9b

 src/components/rightMenu/bottom2.vue

@@ -1,10 +1,10 @@
<template>
  <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show">
    <!-- <div class="mapTool">
      <div class="tool-rotate" @click="PointingNorth" title="指北">
    <div class="mapTool">
      <div class="tool-rotate" @click="flyToCurrentPosition" title="定位">
        <img src="@/assets/img/collection/compass.png" />
      </div>
    </div> -->
    </div>
    <div class="mapTool">
      <div class="tool-rotate" @click="flyBack" title="复位">
        <img src="@/assets/img/collection/recover.png" />
@@ -23,7 +23,6 @@
</template>

<style scoped>

.mapTool {
  width: 0.42rem;
  /* border-radius: 10px; */
@@ -46,7 +45,7 @@
  align-items: center;
  justify-content: center;
}
.mapTool2 .tool-rotate{
.mapTool2 .tool-rotate {
  height: 0.33rem;
  line-height: 0.33rem;
}
@@ -78,7 +77,7 @@
      },
    };
  },
  mounted() { },
  mounted() {},
  watch: {
    "state.show": {
      handler(newVal) {
@@ -106,6 +105,7 @@
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        projection: "EPSG:3857",
        zoom: zoom + 1, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
@@ -117,6 +117,7 @@
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.mapapi.getView().getCenter(), // 中心点
        projection: "EPSG:3857",
        zoom: zoom - 1, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
@@ -126,14 +127,21 @@
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 中心点
        projection: "EPSG:3857",
        zoom: 12, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
      });
    },
    PointingNorth() {
      alert("指北针开发中");
      // console.log("指北针开发中")
    flyToCurrentPosition() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: window.personalPoi, // 中心点
        projection: "EPSG:3857",
        zoom: 17, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1500, // 缩放持续时间，默认不需要设置
      });
    },
  },
};