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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM