项目场景:
最近做一个项目,是关于openlayers,找了很多资料没有找到想要的。
大概描述一下,添加很多图标以后,随便点击一个图标,图标变大,然后进行下一步操作。
就在点击图标获取图标的路径这卡死了,最后还是给搞好了。
问题描述
给modify绑定单击事件,但是直接去获取路径会报错的,显示没有这个函数。
e.selected[0].getStyle().getImage().getSrc(),使用此方法查询
:
//部分代码,让图标变大原来的2倍,设置scale
selectClick.on('select',function (e){
//获取feature对象的两种方式,方式一:
const features = e.target.getFeatures().getArray()
// 选中的图标,//获取feature对象的两种方式,方式二:
let feature = e.selected[0]
const _src = feature.getStyle().getImage().getSrc()
feature.setStyle(new Style({
image: new Icon({
src:_src,
scale:0.8,
})
}))
原因分析:
个人感觉问题的原因是版本问题,最新版本使用这个方法行不通。旧版本好像就可以。记录一下bug吧。
解决方案:
解决点击图标路径问题,部分代码如下:(仅供参考)
const _this = this
selectClick.on('select',function (e){
//获取feature对象的两种方式,方式一:
const features = e.target.getFeatures().getArray()
if (features.length>0){
// 选中的图标,//获取feature对象的两种方式,方式二:
let feature = e.selected[0]
//这里的iconStyle是定义了一个相当于对象集合吧,把所有的原来定义的style对象放到这里面,
//然后去操作这里面的对象。ID要在图标创建好的时候设置一下ID。
const _src = _this.iconStyle[feature.getId()].getImage().getSrc()
feature.setStyle(new Style({
image: new Icon({
src:_src,
scale:0.6,
})
}))