0. initMap

<template>
  <div id="map"></div>
</template>

<script>
import 'ol/ol.css'
import {Map, View} from 'ol'
import {MousePosition, Zoom} from "ol/control";
import {createStringXY} from "ol/coordinate";
import xysGetTDT from "@/views/test/xys/js/xysGetTDT";

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [
          xysGetTDT('EPSG:4326','vec','w')
        ],
        view: new View({
          projection: 'EPSG:4326',// 投影坐标系
          center: [116, 40], // 地图中心
          zoom: 4,// 当前缩放数
          minZoom: 1, // 最小缩放
          maxZoom: 18,// 最大缩放
          constrainResolution: false, // 设置缩放级别为整数
          smoothResolutionConstraint: false, // 关闭无级缩放地图
        }),
        controls: [
          new MousePosition({
            coordinateFormat: createStringXY(0),
          }),
          new Zoom()
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#map {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
  margin: 10px
}
</style>