如何在Open layer 3中隐藏和显示功能？ （重绘？） [英] How to hide and show features in Open layers 3? (Redraw?)

问题描述

我正在将项目从OL2更新为OL3，但我在改变功能样式后仍然坚持如何重绘功能。

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选项，除了vector之外的其他源代码。调度事件和更改也没有奏效。我希望改变，但没有任何反应。

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

我也想知道是否以这种方式改变风格（取道）每个特征到另一个var）或者如果它不仅仅改变了那个特征而保持原始状态不变。另外总是提取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.

推荐答案

所以一边看着文档一遍又一遍，我终于找到了会触发更改事件的内容，就像seto建议的那样。

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

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