Vue + Openlayers加载静态底图

<!--
 * @Description: 设置静态地图
 * @Author: Dragon
 * @Date: 2020-12-17 15:27:05
 * @LastEditTime: 2020-12-17 15:44:19
 * @LastEditors: Dragon
-->

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Image as ImageLayer } from "ol/layer";
import { ImageStatic } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";

import staticMap from "@/assets/map.png";

 
export default {
  data() {
    return {
      map: null, // 地图
      imgx: 0, // 当前地图宽
      imgy: 0, // 当前地图高
    };
  },
  methods: {
     // 初始化地图
    initMap() {
      // let extent = [0, 0, 418, 600];
      let extent = [0, 0, this.imgx, this.imgy];  // 获取图片的宽高
      let projection = new Projection({
        code: "xkcd-image",
        units: "pixels",
        extent: extent
      });
      let $this = this;
      this.map = new Map({
        target: "map",
        layers: [
          new ImageLayer({
            source: new ImageStatic({
              url: staticMap,  // 静态地图
              projection: projection,
              imageExtent: extent
            })
          })
        ],
        view: new View({
          projection: projection,
          center: getCenter(extent),
          zoom: 2,
          maxZoom: 18
        })
      });
    },
  },
  mounted() {
    let img = new Image();
    img.src = staticMap;
    let that = this;
    img.onload = function(res) {
      that.imgx = res.target.width;
      that.imgy = res.target.height;
      that.initMap();
    };
  },
};
</script>
 
<style>
#map {
  width: 100%;
  height: calc(100Vh - 50px);
}
</style>