一、想要的效果，随着地图的放大而放大

1663296423115.png
1663296435302.png

二、引入静态图片

import staticImag from '@/assets/img/map/2.jpeg'

三、引入openLayers

import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Projection from 'ol/proj/Projection'
import { Stamen, Vector as VectorSource, ImageStatic, ImageWMS } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'

四、初始化地图

this.view = new View({
        projection: 'EPSG:4326',
        center: options.center || [113.625351, 34.746303], // 郑州
        zoom: options.zoom || 2
      })
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            title: '网格',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=地图key'
            })
          }),

          new TileLayer({
            title: '数据',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=地图key'
            })
          })
        ],
        view: this.view
      })

五、动态添加图片

const extent = [0, 0, 640, 640]
      const projection = new Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      })

      let imageSource = new ImageStatic({ // 静态图片
        attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
        url: this.staticImag,
        projection,
        imageExtent: [109, 30, 113.570594, 34.829485]

      })
      let imageLayer = new ImageLayer({
        source: imageSource
      })
      this.map.addLayer(imageLayer)
    }

六、注意

1、地图投影必须用 projection: 'EPSG:4326', 或者 projection: EPSG:3857'
2、图片投影必须用‘xkcd-image’
3、地图和图片都存在的情况下，图片投影要自定义，不能放到全局view 里定义