In Openlayers it was possible to turn certain features on or off depending on the zoom level. I have not found the same functionality in OpenLayers 3 despite looking through the documentation. Does anyone know how to do this? This is the feature I'm placing on the map and ol.style.Text is what I would like to display only after the user is zoomed in to a particular zoom level.
var geoJsonObj = {
'type': 'Feature',
'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
projection: 'EPSG:4269',
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
}),
text: new ol.style.Text({
textAlign: 'Center',
text: response.FieldList[key].Acres,
scale: 1
})
})
});
In Openlayers it was possible to turn certain features on or off depending on the zoom level. I have not found the same functionality in OpenLayers 3 despite looking through the documentation. Does anyone know how to do this? This is the feature I'm placing on the map and ol.style.Text is what I would like to display only after the user is zoomed in to a particular zoom level.
var geoJsonObj = {
'type': 'Feature',
'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
projection: 'EPSG:4269',
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
}),
text: new ol.style.Text({
textAlign: 'Center',
text: response.FieldList[key].Acres,
scale: 1
})
})
});
-
does
minResolution,maxResolutionon vector layer initialization fit your needs???? api doc here --> openlayers/en/latest/apidoc/ol.layer.Vector.html – pavlos Commented Jun 14, 2016 at 17:55 - Not really because the Style is part of the layer so not just the text is hidden the entire layer gets hidden... – Funn_Bobby Commented Jun 14, 2016 at 19:24
-
then you may use the
ol.style.StyleFunction()instead of a static style. It accepts two paramsol.Featureandresolution. So using the resolution return your static style with or without text. If you need further help I ll try to make a fiddle. – pavlos Commented Jun 14, 2016 at 19:41 - If you would make a fiddle I would appreciate it, I have looked at numerous examples and they all seem to be different...and when I try to use many of them i receive "function does not exist" error's – Funn_Bobby Commented Jun 15, 2016 at 16:15
- ...when I try to use "ol.style.styleFunction" I get the error "ol.style.styleFunction is not a constructor" and I've also tried the other naming convention "ol.style.StyleFunction" with the same result – Funn_Bobby Commented Jun 15, 2016 at 16:56
2 Answers
Reset to default 9The vector layer example demonstrates the use of a style function for resolution dependent styling: http://openlayers/en/latest/examples/vector-layer.html
Here is a simplified version:
var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: function(feature, resolution) {
var text = resolution < 5000 ? feature.get('name') : '';
return new ol.style.Style({
text: new ol.style.Text({
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})
});
}
});
The layer above would render feature names at resolutions below 5000 map units per pixel.
The vector layer example above has some additional code to reuse styles when possible. If you've got a ton of features, you can put excess pressure on the garbage collector by creating new style instances for every render frame.
This is what I ended up with to show labels but keep a constant style underneath...
style: function (feature, resolution) {
var text = resolution * 100000 < 10 ? response.FieldList[key].Acres : '';
if (text != "") {
styleCache[text] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
}),
fill: new ol.style.Fill({
color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
})
})];
}
else if (text == "") {
styleCache[text] = [new ol.style.Style({
fill: new ol.style.Fill({
color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
})
})
]
} return styleCache[text];
}