更新OpenLayers 3中的要素样式

更新OpenLayers 3中的要素样式,openlayers,openlayers-3,Openlayers,Openlayers 3,我从第三方API中提取数据,该API为我提供lat/lon坐标以及该点的状态。我目前能够成功地绘制点,并在第一次迭代中为它们的状态提供正确的样式。但是,如果状态改变,我需要每3秒钟更新一次他们的样式。我尝试过使用mySource.changed(),但没有成功。我看了所有的地方都找不到解决办法,即使这看起来并不是一件很难完成的事情 我还尝试每隔3秒清除一次源代码,但是矢量层会“闪烁”,我需要它无缝更新。我还尝试删除/重新添加整个矢量层。我需要使用样式功能吗?还是功能覆盖?为什么我不能像在谷歌地图

我从第三方API中提取数据,该API为我提供lat/lon坐标以及该点的状态。我目前能够成功地绘制点,并在第一次迭代中为它们的状态提供正确的样式。但是,如果状态改变,我需要每3秒钟更新一次他们的样式。我尝试过使用
mySource.changed()
,但没有成功。我看了所有的地方都找不到解决办法,即使这看起来并不是一件很难完成的事情

我还尝试每隔3秒清除一次源代码,但是矢量层会“闪烁”,我需要它无缝更新。我还尝试删除/重新添加整个矢量层。我需要使用样式功能吗?还是功能覆盖?为什么我不能像在谷歌地图或传单中那样覆盖样式

我的风格

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);
我如何分配样式/功能

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);
更新:根据纳瓦杰·高达的建议,我终于找到了答案。我创建了第二个函数,并让它遍历特性以更新样式

if ((data.scopes[i].parking_spot.occupied === true && data.scopes[i].parking_spot.occupied === lastCheck[i].occupied)) {
     theFeatures[i].setStyle(takenStyle);
}

每次更改样式时,似乎又添加了相同的功能。你可以做任何一件事

  • 读取源要素并更改要素的样式或
  • 在创建新要素并添加到pointSource之前,请执行source.clear()。(source.clear将删除矢量源中存在的所有要素)

  • 要强制每3秒刷新一次图层样式,可以执行以下操作:

    window.setInterval(function () {
      layer.getSource().dispatchEvent('change');
    }, 3000);
    
    但是,API通过在ol.source.Vector上使用自定义加载器函数和在ol.layer.Vector上使用自定义样式函数,以更简洁的方式支持您尝试执行的操作。看起来是这样的:

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

    您是否尝试过
    feature.changed()
    方法?是的,我试过了。似乎什么也没发生。我还尝试在pointSource上使用它。但是没有运气。我会在设置样式的if语句中调用我的feature.changed()吗?是的,我想是的。你能给我们看看你所有的代码吗?我将创建一个JSFIDLE并尝试调试它以更好地帮助您。是的,我将添加我所有的内容。相当多。还值得注意的是,如果添加pointSource.clear(),样式将正确更改。但我需要升级到无缝状态。我正在添加相同的功能,我只想为它们创建一个功能。如果我改变它,让我有另一个只更新样式的函数,我会只做一个source.getFeatures([I]).setStyle('whateverstyle')?然后在我的向量层上运行刷新?目前,我可以通过每三秒在函数的开头运行clear()来让它工作,但这会导致向量层“闪烁”,我需要它是无缝的。此外,我相信我尝试了updateParams(),我认为你不能在向量层上使用它。@austinruex source.getFeatures([I]).setStyle('whateverstyle')?尝试遍历所有功能并设置样式。这应该行得通。你的方法也行得通。我接受了杰夫·麦克劳德的答案,因为它行得通,为我想做的事情提供了一种更干净的方式。谢谢你的帮助。