Question

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

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

在OL3中，我尝试更新函数来隐藏点图层，但是redraw（）不再存在，因为我正在使用的图层是ol.layer.Vector，我找不到任何像其他更新的updateParams选项除了矢量之外的来源。调度事件和更改也没有奏效。我希望改变，但没有任何反应。

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（）似乎对性能有所侮辱......但我似乎无法找到另一种方式。

无论如何，现在如何在OL3中执行重绘以呈现样式已被更改的功能？图层可以设置为可见，但我不想一直隐藏/显示所有功能。有时我只是想根据他们给出的身份隐藏/显示一些。

Answer 1

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

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

如果您更改“HIDDEN”功能，它会立即刷新

Answer 2

因此，在一遍又一遍地查看文档时，我终于找到了会触发更改事件的内容，就像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);
        }
    }
},

Answer 3

我无法添加评论，因为我没有足够的声誉，但您可能想要调用feature.style = null而不是feature.setStyle(null)，因为这会在内部触发更改后的事件，并且应该立即自动更改风格。此外feature.style = { display: 'none' }在openlayers 3中不起作用，因为样式需要是ol.style.Style对象（http://openlayers.org/en/v3.14.2/apidoc/ol.Feature.html#setStyle）

如果您拥有要素的ID，则可以使用source.getFeatureById（）方法，而不是循环使用这些要素。（http://openlayers.org/en/v3.14.2/apidoc/ol.source.Vector.html#getFeatureById）

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

如果你只是在重新渲染地图时调用一个函数，你可以在地图上监听postrender或postcompose事件。

如果你创建一个JSFiddle，我可以帮助你。

编辑：此示例可能会对您有所帮助 - openlayers.org/en/v3.14.2/examples/dynamic-data.html?q=style

Answer 4

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

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>

HTML

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

Answer 5

对于隐藏或显示，您需要将图层的可见属性设置为false或true。

var someFeature = ...; // create some feature
someFeature.set('style', someStyle) // set some style
var someFeatureLayer = ...; // create Layer from someFeature
map.addLayer( someFeatureLayer ); // add someFeatureLayer
someFeatureLayer.set('visible', false);
//someFeatureLayer.set('visible', true);

如何在Open layer 3中隐藏和显示功能？（重绘？）

5 个答案:

如何在Open layer 3中隐藏和显示功能？ （重绘？）

5 个答案:

如何在Open layer 3中隐藏和显示功能？（重绘？）