vue+openlayers添加点击事件进行图片标记

思考：首先肯定是先创建一个图层，然后在该图层点击的位置添加一个feature(图片)

代码实现：

 //创建矢量容器，当点击时将图标feature放进去
 var iconVector = new VectorSource({
   features:[]
 })
 
 //创建图层
 var iconLayer = new VectorLayer({
   source:iconVector
 })
 //将图层添加到地图上
 this.map.addLayer(iconLayer)
 
 this.map.on('singleclick',mapClick);

 function mapClick(e){
 	  //点击的坐标
     var p = e.coordinate
     //添加地图点击标记,创建标记feature
     var iconFeature = new Feature({
       geometry: new Point(p)
     })
     //标记样式
     var iconStyle = new Style({
       image: new Icon({
         src:require('../assets/bj.jpg')
       })
     })
     //设置标记样式
     iconFeature.setStyle(iconStyle)
     iconVector.clear()//每次先清空容器
     iconVector.addFeature(iconFeature)//将创建好的feature放入到容器中
 }

效果图：

注意：上面的代码是没有高亮的，但是标记图片是一样的，图片没做处理，但是实现方式应该是正确的