更新OpenLayers 3中的特性样式
更新OpenLayers 3中的特性样式
提问于 2017-02-13 18:19:31
我正在从第三方API中提取数据，它给我提供了lat/lon的同弦以及点的状态。目前，我能够成功地绘制这些点，并在第一次迭代中为它们的状态提供正确的样式。然而，每3秒钟，我需要能够更新他们的风格，如果状态改变。我试过使用mySource.changed()，但没有起作用。我到处看了看，找不到解决办法，尽管这看起来不应该是一件很难完成的事情？
我也尝试每3秒clear()我的源，但然后矢量层‘闪烁’，我需要它无缝更新。我还尝试删除/重新添加整个向量层。我需要使用样式函数吗？还是功能覆盖？为什么我不能像在谷歌地图或传单中那样覆盖样式呢？
我的风格
var takenStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '../_images/redMark.png',
scale: .2
})
});
var openStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '../_images/greenMark.png',
scale: .2
})
});
var unsureStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '../_images/yellowMark.png',
scale: .2
})
});如何分配样式/特性
if ((data.scopes[i].parking_spot.status === true)) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(pointCoords, 'EPSG:4326', 'EPSG:3857'))
});
feature.setStyle(takenStyle);
feature.setId(i);
pointSource.addFeature(feature);更新：使用Navageer的建议，我终于能够解决这个问题。我创建了第二个函数，并让它迭代这些特性来更新样式。
if ((data.scopes[i].parking_spot.occupied === true && data.scopes[i].parking_spot.occupied === lastCheck[i].occupied)) {
theFeatures[i].setStyle(takenStyle);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-14 17:51:41
要强制每3秒刷新一次图层样式，您可以这样做：
window.setInterval(function () {
layer.getSource().dispatchEvent('change');
}, 3000);但是，通过在ol.source.Vector上使用自定义加载程序函数和在ol.layer.Vector上使用自定义样式函数，API以更干净的方式支持您所要做的事情。看起来是这样的：
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
loader: function(extent, resolution, projection) {
var fetchData = function() {
// Fetch data here, add features *without style* to layer.getSource()
};
// Fetch data once immediately
fetchData();
// re-fetch every 3 seconds
window.setInterval(fetchData, 3000);
}
}),
style: function(feature, resolution) {
var props = feature.getProperties();
// Psuedo-logic shown here, use your own to determine which style to return
if (isTaken) {
return takenStyle;
} else if (isOpen) {
return openStyle;
} else {
return unsureStyle;
}
}
});Stack Overflow用户
发布于 2017-02-14 04:00:23
当每次更改样式时，您似乎再次添加了相同的功能。你可以
- 读取源的特性并更改功能的样式或
- 在创建新特性并添加到source.clear之前，执行pointSource()。(source.clear移除矢量源中的所有特性)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42210830
复制相关文章
相似问题
腾讯云开发者
