Hello, you can solve the issue with 2 ways
1- Using ol.layer.Image and ol.source.ImageVector and giving your ol.source.
Vector to ol.source.ImageVector.
This way rendering performance can be increased dramatically. I guess this
one is what you are asking for. See the example, use
Example code:
var imageVectorSource = new ol.source.ImageVector({
source: vectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
})
var imageLayer = new ol.layer.Image({
source: imageVectorSource
})
2- Changing visibility at certain zoom levels. I saw it from your codes but
I couldn't find where you bound your "zoomChanged" function (as event) to
map object.
Here is the example:
map.getView().on('change:resolution', zoomChanged); // this one binds the
map's resolution change event to zoom changed
/**
* Gets executed when zoom changes on map. Shows or hides required layers
up to zoom values.
* @param {Event} event - Event object when zoom changes.
*/
var zoomChanged = function(event)
{
if (map.getView().getZoom() >= 15)
{
imageLayer.setVisible(true);
}
if (map.getView().getZoom() < 15)
{
imageLayer.setVisible(false);
}
}
--
You received this message because you are subscribed to the Google Groups "OL3
Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/ol3-dev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/ol3-dev/50717002-03e8-49ec-a493-ccf9bdfba6c5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
