openLayer通過點坐標來向地圖添加圖片

// 效果圖

// 地圖的map對象就不寫了

ol.source.Vector，提供矢量圖層數據，繼承自 ol.source.Source

import VectorSource from "ol/source/Vector"

let  featuresSource = VectorSource()   // 矢量地圖

//從后端拿回數據是wkt串   例： "Point(112, 42)"

let imgUrl = require('@/assets/img/斜坡.png')  // 圖片地址

let pointXY = "Point(112, 42)" // wkt串
// openLayer的feature對象

let feature = {
  'attributes': {
    'biaozhu_id': '1' // 圖片的id，不建議寫死
  },
  'style': {
    'imagescale': 0.5,
    'imagesrc': imgUrl
  },
  'geometry': pointXY
}


// 此時就需要把wkt串轉換為feature

import WKT from "ol/format/WKT";  // 引入依賴
var  featureTemp = this.transformFeatureFromWkt(feature.geometry);
// 接下來在將上方feature的屬性和style樣式進行賦值
featureTemp.setStyle(style);
featureTemp.attributes = feature.attributes;
featuresSource.addFeature(featureTemp); // 添加到地圖

// wkt轉換為feature的方法
transformFeatureFromWkt: function(wkt){

  var format = new WKT();
  var feature = format.readFeature(wkt, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:4326'
  });
  return feature;
}