AnalysisSystemForRadionuclide_vue/src/views/stationOperation/components/Map.vue

<template>
  <div ref="mapContainerRef" class="map-container">
    <template v-if="map">
      <slot></slot>
    </template>
  </div>
</template>
<script>
import TileLayer from 'ol/layer/Tile'
import Map from 'ol/Map'
import XYZ from 'ol/source/XYZ'
import View from 'ol/View'
import { fromLonLat } from 'ol/proj'

const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL
export default {
  props: {
    zoom: {
      type: Number,
      default: 1,
    },
    maxZoom: {
      type: Number,
      default: 16,
    },
    minZoom: {
      type: Number,
      default: 1,
    },
    center: {
      type: Object,
      default() {
        return {
          longitude: 116,
          latitude: 40,
        }
      },
    },
  },
  data() {
    return {
      map: null,
      stationList: [],
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const { longitude, latitude } = this.center

      this.tileLayer = new TileLayer({
        source: new XYZ({
          url: mapSourceUrl,
        }),
      })

      const layers = [this.tileLayer]

      const view = new View({
        projection: 'EPSG:3857', // 使用这个坐标系
        center: fromLonLat([longitude, latitude]),
        zoom: this.zoom,
        maxZoom: this.maxZoom,
        minZoom: this.minZoom,
        extent: [-20037508.34 - 3500000, -20037508.34 , 20037508.34 + 3500000, 20037508.34],
      })

      this.map = new Map({
        target: this.$refs.mapContainerRef,
        layers,
        view,
        controls: [],
      })
    },

    /**
     * 以下是工具方法
     */
    // 获取地图缩放级别
    getZoom() {
      return this.map.getView().getZoom()
    },

    // 设置地图缩放级别
    setZoom(zoom) {
      if (zoom < this.minZoom) {
        zoom = this.minZoom
      }
      if (zoom > this.maxZoom) {
        zoom = this.maxZoom
      }
      this.map.getView().animate({ zoom })
    },

    getMapInstance() {
      return this.map
    },

    // 获取地图中心点
    getCenter() {
      return this.map.getView().getCenter()
    },

    // 平移到某个位置
    panTo(center, duration = 1000) {
      return this.map.getView().animate({
        center: fromLonLat(center),
        duration,
      })
    },

    // 修改地图来源
    changeSource(url) {
      this.tileLayer.setSource(
        new XYZ({
          url,
        })
      )
    },
  },
}
</script>
<style lang="less" scoped>
.map-container {
  height: 100%;
  position: relative;
}
</style>