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)
}