使用 OpenLayers 中的属性过滤功能

问题描述

我想使用要素属性过滤地图上的要素。

例如，如果我在 geojson 中有这个属性：

...
"properties": {
                "Start": 10
            }
...

而且我只想看到带有 Start > 10 的特征，我该如何实现带有 Start < 10 的特征被隐藏？

如果我使用以下代码更改样式，这些功能是透明的，但如果我使用 forEachFeatureAtPixel，点击后它们仍然可用。我希望不显示功能，并且无法点击等。

let invisibleStyle = new ol.style.Fill({
    color: [0,0],});

const NewLayer= new ol.layer.VectorImage ({
        source: new ol.source.Vector({
            url: *url*,format: new ol.format.GeoJSON(),}),visible: true,style: function (feature) {
        if (feature.get('Start')>10) {
            let style = new ol.style.Style({
                fill: fillStyle,stroke: strokeStyle
            })
            return style;   
        } else {
            let style = new ol.style.Style({
                fill: invisibleStyle,})
            return style;   
        }   
    });
map.addLayer(NewLayer);

我也尝试过像这样使用 visible 但它不起作用：

const NewLayer= new ol.layer.VectorImage ({
        source: new ol.source.Vector({
            url: *url*,visible: function(feature) {
                 if (feature.get('Start')<10) {
                    return true;
                 } else {
                    return false;
                 }
          },style: new ol.style.Style({
              fill: fillStyle,stroke: strokeStyle,})      
    });
map.addLayer(NewLayer);

解决方法

无法看到透明填充，但可以检测到它（因此您可以通过在多边形内部单击来选择它）。为避免显示和命中检测，请不要返回样式

    style: function (feature) {
      if (feature.get('Start')>10) {
        let style = new ol.style.Style({
            fill: fillStyle,stroke: strokeStyle
        })
        return style;   
      }
    }