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放入到容器中
 }
           

效果圖：

注意：上面的代碼是沒有高亮的，但是标記圖檔是一樣的，圖檔沒做處理，但是實作方式應該是正确的