ly-front/src/views/mapControl/index.vue

<template>
  <div class="HomeMap">
    <div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
    <div id="map" ref="olMap" class="map-container"></div>
    <div class="pointingNorth" @click="mapNorth">
      <img src="@/assets/img/menu/zhibeizhen.png" alt="指北" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import XYZ from "ol/source/XYZ";

export default {
  name: "HomeMap",
  data() {
    return {
      map: null,
      zoomLevel: null
    };
  },
  created() {
    // 清空控制台（可选）
    // console.clear();
  },
  mounted() {
    this.initMap();
  },
  computed: {
    ...mapGetters(["statePage", "cityCode"])
  },
  methods: {
    initMap() {
      // 初始化 OpenLayers 地图

      this.map = new Map({
        target: this.$refs.olMap,
        layers: [
          new TileLayer({
            visible: true,
            source: new XYZ({
              visible: true,
              url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
            })
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [116.4, 39.9], // 经纬度转投影坐标
          zoom: 10,
          minZoom: 3,
          maxZoom: 18,
          constrainRotation: false // 允许旋转
        })
      });

      // 保存地图实例到全局（与 Mars3D 的 window.marsMap 类似）
      window.olMap = this.map;

      // 处理地图加载完成后的逻辑
      this.onMapLoad(this.map);

      // 绑定点击事件
      this.map.on("click", this.mapClickHandler);

      // 绑定缩放/移动结束事件
      this.map.getView().on("change:resolution", this.mapZoomHandler);
      this.map.getView().on("change:center", this.mapZoomHandler);
    },
    mapClickHandler(event) {
      // 处理地图点击事件
      console.log("地图点击:", event);
    },
    mapZoomHandler() {
      // 获取当前缩放等级
      this.zoomLevel = Math.round(this.map.getView().getZoom());
    },
    onMapLoad(map) {
      // 地图加载完成后的处理
      const camera = window.mapConfig || {};
      if (camera.isCamera) {
        // 设置视角约束
        map
          .getView()
          .setCenter(
            fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
          );
        map.getView().setMinZoom(3); // 最小缩放等级
        map.getView().setMaxZoom(18); // 最大缩放等级
      }
    },
    mapNorth() {
      // 指北：将地图旋转角度重置为 0
      const view = this.map.getView();
      const currentCenter = view.getCenter();
      const currentZoom = view.getZoom();
      view.animate({
        center: currentCenter,
        zoom: currentZoom < 3 ? 10 : currentZoom, // 确保最小缩放等级
        rotation: 0, // 指北
        duration: 500 // 动画持续时间
      });
    }
  }
};
</script>

<style scoped lang="scss">
.HomeMap {
  width: 100%;
  height: 100%;
  position: relative;

  .zoom-level {
    position: absolute;
    bottom: 0.8%;
    left: 1%;
    z-index: 1000;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 3px;
  }

  .map-container {
    width: 100%;
    height: 100%;
  }

  .pointingNorth {
    position: absolute;
    bottom: 5%;
    right: 25%;
    cursor: pointer;
    z-index: 1000;

    img {
      width: 35px;
      height: 35px;
    }
  }
}
</style>