在 OpenLayers 3 中更新要素样式

Question

我正在从第 3 方 API 提取数据，该数据为我提供 lat/lon 坐标以及该点的状态。我目前能够成功地绘制这些点，并在第一次迭代时为它们的状态提供正确的样式。但是，如果状态发生变化，我需要每 3 秒更新一次他们的样式。我试过使用 mySource.changed() 但它没有用。我找遍了都找不到解决方案，尽管这似乎不是一件很难完成的事情？

我也尝试过每 3 秒 clear() 我的源，但是矢量图层 'flashes' 我需要它无缝更新。我还尝试了 removing/re-adding 整个矢量图层。我需要使用样式功能吗？还是功能叠加？为什么我不能像在 google 地图或传单中那样覆盖样式？

我的风格

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

我如何分配 styles/features

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 Gowda 的建议，我终于弄明白了。我创建了第二个函数，并让它遍历这些特性以更新样式。

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

Answer 1

每次更改样式时，您似乎都在添加相同的功能。你可以做

读取源特征并更改特征的样式或
在创建新特征并添加到 pointSource 之前执行 source.clear()。（source.clear 删除矢量源中存在的所有特征）

Answer 2

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

在 OpenLayers 3 中更新要素样式

Updating feature styles in OpenLayers 3

openlayers

openlayers-3