openlayers 功能消失图层样式
openlayers3 feature disapear layer style
我正在开发嵌入式 "GPS"。我们的嵌入式浏览器是qt5.3 webpluging,比较旧,但是我们还不能升级我们的qt。
问题是,当我们更新当前位置的标记时,它有时会消失 10 秒或更长时间。这是工作示例或问题的 link:https://jsfiddle.net/6c8negae/3/。在 firefox 中没有问题,但图像有时会在我们的浏览器中消失。
我们计算的样式:
var STYLE_ON = new ol.style.Style({
image: new ol.style.Icon({
// not the actual arrow we use: ours is 30*30, 1.9kio
src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
})
});
var STYLE_OFF = new ol.style.Style({
image: new ol.style.Icon({
// actually a grayed image of the STYLE_ON arrow
src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
})
});
我们如何select风格:
map.addLayer(new ol.layer.Vector({
type: 'markers',
source: markers,
style: function (feature) {
var style = null;
if (feature.get('vtype') === 'cur') {
style = feature.get('fade') ? STYLE_OFF : STYLE_ON;
style.getImage().setRotation(feature.get('rotation'));
}
else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
opacity: 0.5,
fill: new ol.style.Fill({
color: COLORS[feature.get('vtype')]
})
})
});
}
return [style];
}
}));
有什么解决方法吗?
每个功能使用一种样式看起来效率并不高(因为我们的原始代码就是这样)。
尝试使用 base64 编码的图像:
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNrsksERgyAQRfdTQS7pI3YQS0kJHlJFiggdpARboITcc7GELDObDCrIqnBKdoaB0c97sApaUS+63Xk68WiPdB00e6AEH3h68DjLI6eVQAnv5eRhqSTYCFdLsAOukmAnPCtBAfiiBIXgSQkKwqMSFIbPJKgAH0lMJTgJszdiSpXvY7fwvpNM8haG+3ThhU3A28wBnGRiEuvZ/gYUkQzykVyuD5KZSqwwyQTBj0QNT0i+8JEgkDRr4BNJE8JnAgk+t/42sb2GKtdf8AOCtwADADYvWhxy2YPJAAAAAElFTkSuQmCC'
})
});
我正在开发嵌入式 "GPS"。我们的嵌入式浏览器是qt5.3 webpluging,比较旧,但是我们还不能升级我们的qt。
问题是,当我们更新当前位置的标记时,它有时会消失 10 秒或更长时间。这是工作示例或问题的 link:https://jsfiddle.net/6c8negae/3/。在 firefox 中没有问题,但图像有时会在我们的浏览器中消失。
我们计算的样式:
var STYLE_ON = new ol.style.Style({
image: new ol.style.Icon({
// not the actual arrow we use: ours is 30*30, 1.9kio
src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
})
});
var STYLE_OFF = new ol.style.Style({
image: new ol.style.Icon({
// actually a grayed image of the STYLE_ON arrow
src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
})
});
我们如何select风格:
map.addLayer(new ol.layer.Vector({
type: 'markers',
source: markers,
style: function (feature) {
var style = null;
if (feature.get('vtype') === 'cur') {
style = feature.get('fade') ? STYLE_OFF : STYLE_ON;
style.getImage().setRotation(feature.get('rotation'));
}
else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
opacity: 0.5,
fill: new ol.style.Fill({
color: COLORS[feature.get('vtype')]
})
})
});
}
return [style];
}
}));
有什么解决方法吗? 每个功能使用一种样式看起来效率并不高(因为我们的原始代码就是这样)。
尝试使用 base64 编码的图像:
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNrsksERgyAQRfdTQS7pI3YQS0kJHlJFiggdpARboITcc7GELDObDCrIqnBKdoaB0c97sApaUS+63Xk68WiPdB00e6AEH3h68DjLI6eVQAnv5eRhqSTYCFdLsAOukmAnPCtBAfiiBIXgSQkKwqMSFIbPJKgAH0lMJTgJszdiSpXvY7fwvpNM8haG+3ThhU3A28wBnGRiEuvZ/gYUkQzykVyuD5KZSqwwyQTBj0QNT0i+8JEgkDRr4BNJE8JnAgk+t/42sb2GKtdf8AOCtwADADYvWhxy2YPJAAAAAElFTkSuQmCC'
})
});