openlayers 添加图片图层

openlayers 添加图片图层

import GeoJSON from 'ol/format/GeoJSON'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as SourceVec, Cluster, OSM, TileArcGISRest, TileWMS, Vector as VectorSource } from 'ol/source'
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style'
import { Feature } from 'ol'
import { Point } from 'ol/geom'
import View from 'ol/View'
import 'ol/ol.css'


/**
   * 添加图片图层
   * @param {*} map 地图
   * @param {*} imgUrl 图片url
   * @param {*} coordinate [经度, 纬度]
   * @param {*} name 图层名称
   */
  addImageLayer(map, imgUrl, coordinate, name) {
    const vectorLayer = new VectorLayer({
      source: new VectorSource(),
      name: name || 'imgLayer',
      zIndex: 300,
    })

    const iconFeature = new Feature({
      geometry: new Point(coordinates),
      name: 'Marker',
    })

    iconFeature.setStyle(
      new Style({
        image: new Icon({
          src: imgUrl,
          scale: 1,
          anchor: [0.5, 1],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
        }),
      })
    )
    vectorLayer.getSource().addFeature(iconFeature)
    map.addLayer(vectorLayer)
  }