vue2+openlayer7添加图片标注

在Vue2中使用OpenLayers7添加图片标注的过程如下：
1. 首先，在Vue2项目中安装OpenLayers7和相关依赖：

npm install ol --save
npm install --save-dev @types/ol

2. 在Vue组件中引入OpenLayers7和相关组件：

import * as ol from 'ol';
import 'ol/ol.css';
import { Map, View } from 'ol';
import { Image as ImageLayer, Tile as TileLayer } from 'ol/layer';
import { ImageWMS, OSM, XYZ } from 'ol/source';
import { Style, Circle, Fill, Stroke, Text, Icon } from 'ol/style';
import { fromLonLat } from 'ol/proj';

3. 在Vue组件中定义需要使用的地图和图层：

<template>
  <div id="map" class="map"></div>
</template>

<script>
export default {
  name: 'Map',
  data () {
    return {
      map: null,
      view: null,
      imageLayer: null,
      markerLayer: null
    }
  },
  mounted () {
    this.initMap()
    this.addImageLayer()
    this.addMarkerLayer()
  },
  methods: {
    initMap () {
      this.view = new View({
        center: fromLonLat([121.48, 31.22]), //上海的经纬度
        zoom: 12
      })
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: this.view
      })
    },
    addImageLayer () {
      const imageSource = new ImageWMS({
        url: 'http://localhost/geoserver/wms',
        params: {'LAYERS': 'test'},
        serverType: 'geoserver'
      })
      this.imageLayer = new ImageLayer({
        source: imageSource
      })
      this.map.addLayer(this.imageLayer)
    },
    addMarkerLayer () {
      const markerSource = new XYZ({
        url: './static/icons/',
        crossOrigin: 'anonymous'
      })
      this.markerLayer = new VectorLayer({
        source: markerSource,
        style: function (feature) {
          return new Style({
            image: new Icon({
              anchor: [0.5, 1],
              src: feature.get('src'),
              scale: feature.get('scale')
            }),
            text: new Text({
              text: feature.get('name'),
              offsetY: -20,
              fill: new Fill({
                color: '#fff'
              }),
              stroke: new Stroke({
                color: '#000',
                width: 2
              })
            })
          })
        }
      })
      this.map.addLayer(this.markerLayer)
    }
  }
}
</script>

4. 在Vue组件中定义一个方法，用于添加图片标注：

addMarker () {
  const markerFeature = new Feature({
    geometry: new Point(fromLonLat([121.48, 31.22])), //标注的经纬度
    name: '标注名称',
    src: 'marker.png', //标注的图片地址
    scale: 0.5 //标注的缩放比例
  })
  this.markerLayer.getSource().addFeature(markerFeature)
}

5. 在Vue组件中调用addMarker()方法来添加图片标注：

<button @click="addMarker">添加标注</button>