I’d like to filter features on the map using the feature properties.
For example if I have this property in the geojson:
JavaScript
x
6
1
2
"properties": {
3
"Start": 10
4
}
5
6
And I want to see only featuers with Start > 10
, how can I implement that features with Start < 10
are hidden?
If I change the style with following code the features are transparent but they are still available after click if I use forEachFeatureAtPixel
. I want that features are not displayed and there are not available for clicking etc.
JavaScript
1
26
26
1
let invisibleStyle = new ol.style.Fill({
2
color: [0,0, 0, 0],
3
});
4
5
const NewLayer= new ol.layer.VectorImage ({
6
source: new ol.source.Vector({
7
url: *url*,
8
format: new ol.format.GeoJSON(),
9
}),
10
visible: true,
11
style: function (feature) {
12
if (feature.get('Start')>10) {
13
let style = new ol.style.Style({
14
fill: fillStyle,
15
stroke: strokeStyle
16
})
17
return style;
18
} else {
19
let style = new ol.style.Style({
20
fill: invisibleStyle,
21
})
22
return style;
23
}
24
});
25
map.addLayer(NewLayer);
26
I tried also to use the visible
like this but it doesn’t work:
JavaScript
1
19
19
1
const NewLayer= new ol.layer.VectorImage ({
2
source: new ol.source.Vector({
3
url: *url*,
4
format: new ol.format.GeoJSON(),
5
}),
6
visible: function(feature) {
7
if (feature.get('Start')<10) {
8
return true;
9
} else {
10
return false;
11
}
12
},
13
style: new ol.style.Style({
14
fill: fillStyle,
15
stroke: strokeStyle,
16
})
17
});
18
map.addLayer(NewLayer);
19
Advertisement
Answer
Transparent fill cannot be seen but is hit detected (so you can select a polygon by clicking inside it). To avoid display and hit detection simply don’t return a style
JavaScript
1
10
10
1
style: function (feature) {
2
if (feature.get('Start')>10) {
3
let style = new ol.style.Style({
4
fill: fillStyle,
5
stroke: strokeStyle
6
})
7
return style;
8
}
9
}
10