如何在OpenLayers 3中隐藏和显示功能? (重画?) [英] How to hide and show features in OpenLayers 3? (Redraw?)

问题描述

我正在将项目从 OL2 更新为

I'm updating a project from OL2 to OL3, but I'm stuck on how to redraw features after changing the feature style.

在OL2中，该方法有效:

In OL2, this worked:

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

在OL3中，我尝试更新该函数以隐藏点图层，但是redraw()不再存在，并且由于我正在使用的图层是ol.layer.Vector，所以找不到其他的updateParams选项除了矢量，还有其他资源.派遣事件和更改也无法正常工作.我希望能够改变，但是什么也没发生.

In OL3, I tried updating the function to hide the points layer, but redraw() no longer exists and since the layer I am working with is an ol.layer.Vector, I can't find any updateParams options like other sources besides vectors have. Dispatch Event and changed also did not work. I was hoping changed would, but nothing happens.

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

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

    if (id !== null) {
        for( i = 0; i < len; i++ ) {
            feature = this.pointsLayer.getSource().getFeatures()[i];

            if (feature.get('aces_id') == id) {
                feature.style = null;
            } else {
                feature.style = { display: 'none' };
            }
        }
    } else {
        for( i = 0; i < len; i++ ) {
            feature = this.pointsLayer.getSource().getFeatures()[i];
            feature.style = { display: 'none' };
        }
    }
    //this.pointsLayer.redraw();
    //this.pointsLayer.dispatchEvent(goog.events.EventType.CHANGE);
    this.pointsLayer.changed();
},

我还想知道是否以这种方式更改了样式(将每个功能获取到另一个变量)，或者这是否只会更改该功能并保持原始状态不变.再加上总是获取getSource().getFeatures()似乎对性能非常有害...但是我似乎找不到其他方法.

I'm also wondering if changing the style is done this way (fetching each feature to another var) or if that won't just change that feature and leave the original untouched. Plus always fetching getSource().getFeatures() seems abusive on the performance... but I can't seem to find another way.

无论如何，现在如何在OL3中执行重绘以渲染样式已更改的特征?可以将图层设置为可见，但是我不想一直隐藏/显示所有要素.有时我只是想根据他们给定的ID隐藏/显示一些.

Regardless, how is redraw performed in OL3 now to render features whose styles have been altered? A layer can be set as visible, but I don't want to hide/show all the features all the time. Sometimes I just want to hide/show a few according to their given id.

推荐答案

因此，一遍又一遍地查看文档时，我终于找到了触发变更事件的东西，就像濑户事后建议的那样.

So while looking at the documentation over and over, I finally found what would fire the change event, much like seto suggested after.

这是从OL2到OL3的转换函数，对我有用.由于setStyle完成了所有操作，因此不再需要重绘.

This is the converted function from OL2 to OL3 that works for me. Redraw is no longer needed since setStyle does it all.

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

这篇关于如何在OpenLayers 3中隐藏和显示功能? (重画?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！