ol如何添加图片至地图？（weixin公众号【图说GIS】）

有人问我ol如何添加图片至地图？找了下解决方案，记录下。

添加地图

import OlMap from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import ImageLayer from "ol/layer/Image"
import XYZ from 'ol/source/XYZ';
import ImageStatic from 'ol/source/ImageStatic';
import { transformExtent, transform } from 'ol/proj'
 const map = new OlMap({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: transform([103.76325, 36.06873], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
      })
    });

添加图片

import url from "./1.png"//在线地址也可以,base64也可以，下面的这段是base64
//data:image/png;base64,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

const layer = new ImageLayer()
    map.addLayer(layer)
    const extent = transformExtent([103.70859, 36.04174, 103.83822, 36.09699], 'EPSG:4326', 'EPSG:3857')
    const imageSource = new ImageStatic({
      url,
      projection: 'EPSG:3857',
      imageExtent: extent
    })
    layer.setSource(imageSource);