Javascript 如何在OpenLayers 3中隐藏和显示功能？（重画？）

我正在将一个项目从更新到，但在更改功能样式后，我一直在研究如何重新绘制功能

在OL2中，这起到了作用：

hidePoints: function(id) {
    if (! this.getMap().center) {
        return;
    }

    var i,
    feature,    
    len = this.points.features.length;

   if (id !== null) {
    for( i = 0; i < len; i++ ) {         
      feature = this.points.features[i];
      if (feature.attributes.aces_id == id) {
          feature.style = null;
        } else {
            feature.style = { display: 'none' };
        }
      }
   } else {
      for( i = 0; i < len; i++ ) {         
        feature = this.points.features[i];
        feature.style = { display: 'none' };
      }
   }
 this.points.redraw();
},

我还想知道改变样式是这样做的（将每个特性提取到另一个var），还是这样做不会仅仅改变该特性而保持原始特性不变。加上总是抓取

getSource（）。getFeatures（）

似乎会滥用性能。。。但我似乎找不到别的办法

---

无论如何，现在如何在OL3中执行重画以渲染样式已更改的特征？图层可以设置为可见，但我不想一直隐藏/显示所有功能。有时我只想根据给定的id隐藏/显示一些。我无法添加注释，因为我没有足够的声誉，但是您可能需要调用

feature.setStyle（null）

，而不是

feature.style=null

，因为这会在内部触发已更改的事件，并应立即自动更改样式。另外，

feature.style={display:'none'}

在openlayers 3中不起作用，因为样式需要是ol.style.style对象（）

如果您有功能的ID，则可以使用source.getFeatureById（）方法，而不是在功能中循环。（）

关于渲染，我认为使用地图的map.render（）（位于openlayers.org/en/v3.14.2/apidoc/ol.map.html#render）将重新渲染地图

如果您只想在重新渲染贴图时调用函数，则可以侦听贴图上的postrender或postcompose事件

如果您创建一个JSFIDLE，我可以进一步帮助您

---

编辑：这个示例可能会帮助您-openlayers.org/en/v3.14.2/examples/dynamic data.html？q=style

因此，在反复查看文档的过程中，我终于找到了触发更改事件的原因，很像seto之后建议的那样

这是从OL2到OL3的转换函数，对我来说很有用。由于setStyle完成了所有工作，因此不再需要重新绘制

hidePoints: function(id) {
    if (! this.getMap().getView().getCenter()) {
        return;
    }

    var i,
        feature,
        layerSourceFeatures = this.pointsLayer.getSource().getFeatures(),
        len = layerSourceFeatures.length;

    var emptyImgStyle = new ol.style.Style({ image: '' });

    // If an aces id was provided
    if (id !== undefined) {
        for( i = 0; i < len; i++ ) {
            feature = layerSourceFeatures[i];

            feature.setStyle(emptyImgStyle);

            // Resetting feature style back to default function given in defaultPointStyleFunction()
            if (feature.get('aces_id') == id) {
                feature.setStyle(null);
            }
            // Hiding marker by removing its associated image
            else {
                feature.setStyle(emptyImgStyle);
            }
        }
    }
    // No id was provided - all points are hidden
    else {
        for( i = 0; i < len; i++ ) {
            feature = layerSourceFeatures[i];
            feature.setStyle(emptyImgStyle);
        }
    }
},

隐藏点：函数（id）{
如果（！this.getMap（）.getView（）.getCenter（））{
返回；
}
var i，
特写，
layerSourceFeatures=this.pointsLayer.getSource（）.getFeatures（），
len=layerSourceFeatures.length；
var emptyImgStyle=new ol.style.style（{image:'}）；
//如果提供了aces id
如果（id！==未定义）{
对于（i=0；i

另一种方法是在功能上使用样式函数和隐藏属性：

var style = new ol.Style(...);

function Stylefunction (feature, resolution) {
    var prop = feature.getProperties();
    if (prop.HIDDEN)
       return;

    return style;
}

var layer = new ol.layer.Vector({
    source: new ol.source.Vector(...),
    style: Stylefunction 
});

---

如果更改功能“隐藏”属性，它会立即刷新

我喜欢这种图层切换方法（也适用于其他功能）：

JAVASCRIPT

<script>
    var layerBing = new ol.layer.Tile({
          source: new ol.source.BingMaps({
              imagerySet: 'Aerial',
              key: 'YourKeyBingAccess'
          }),
          name: 'Bing'
    });

    /*
    *  YOUR MAP CODE  GOES HERE
    */

    function toggleLayer(layerObject) {
        var newVisibility = !(layerObject.get('visible'));
        layerObject.set('visible', newVisibility);
    }
</script>

var layerBing=新建ol.layer.Tile({
来源：新ol.source.BingMaps({
图像集：“天线”，
键：“YourKeyBingAccess”
}),
名字：'冰'
});
/*
*你的地图代码在这里
*/
功能切换图层（layerObject）{
var newVisibility=！（layerObject.get（'visible'）；
layerObject.set（'visible'，newVisibility）；
}

HTML

Bing卫星

---

感谢您的评论，通过您提到的setStyle，我昨天终于找到了一个我喜欢的解决方案。该功能的id没有帮助，因为它们是根据其值配置中的id隐藏/显示的。我不知道渲染或那个示例，谢谢！：D虽然我不太确定如何展示我在这里实现的解决方案，但我想我可以自己回答吗？对我来说，这似乎是一种更干净的方法。@David，你能详细说明一下吗？隐藏是一个任意选择的属性，而不是OL3上定义的东西，对吗？

<script>
    var layerBing = new ol.layer.Tile({
          source: new ol.source.BingMaps({
              imagerySet: 'Aerial',
              key: 'YourKeyBingAccess'
          }),
          name: 'Bing'
    });

    /*
    *  YOUR MAP CODE  GOES HERE
    */

    function toggleLayer(layerObject) {
        var newVisibility = !(layerObject.get('visible'));
        layerObject.set('visible', newVisibility);
    }
</script>

<button onclick="toggleLayer(layerBing)">Bing Satellite</button>
<div id="map" class="map"></div>