I'm using OpenLayers to display a map in a web page. I am using tiles from CloudMade, but the same issues occur with the Mapnik tiles from OpenStreetMap.
I'm trying to restrict the map so that the user cannot zoom all the way out to world view -- I want them to stay at roughly a city level zoom at minimum.
I have tried using the minZoomLevel
/ maxZoomLevel
/ numZoomLevels
properties; only the maxZoomLevel
and numZoomLevels
properties seem to work, whereas the minZoomLevel
property seems to be completely ignored.
Is there another way to accomplish this?
You could override the isValidZoomLevel
function. Something like this (not tested):
OpenLayers.Map.isValidZoomLevel = function(zoomLevel) {
return ( (zoomLevel != null) &&
(zoomLevel >= 2) && // set min level here, could read from property
(zoomLevel < this.getNumZoomLevels()) );
}
EDIT
Or you would need to override the available resolutions, see the example here: http://dev.openlayers.org/examples/zoomLevels.html
minZoomLevel is not supported for XYZ layers, of which OSM is a subclass.
See the following tickets for workarounds:
I found the simplest way to restrict the maxZoom levels for a XYZ layer was to override the getNumZoomLevels method:
map.getNumZoomLevels = function(){
return 10;
};
This pevents zooming beyond level 10 and also draws the zoomBar control correctly. This and a combination of the zoomOffset
option should allow you to easily control min/max zoom without having to mess around with resolutions or subclasses.
Other answers here refer to OpenLayers versions prior to version 3.
With OpenLayers 3, you can use the maxZoom
map option when initializing the map, as follows:
var map = new ol.Map({
target: 'mapcontainer-001',
layers: layers, // Layers need to be initialized previously
view: new ol.View({
center: ol.proj.transform([-5.12345, 42.12345], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
maxZoom: 19
})
});
More information can be found in OpenLayers documentation: http://openlayers.org/en/v3.0.0/doc/tutorials/concepts.html
Now i use this in the "View":
view: new ol.View({
center: ol.proj.transform([-3.707524, 40.485644], 'EPSG:4326',EPSG:3857'),
zoom: 15,
maxZoom: 17,
minZoom: 6
}),
And it works fine
I ended up with this solution as i could not figure out how to use zoomOffset in my setup.
map.getNumZoomLevels = function(){
return (options.maxzoom-options.minzoom+1);
};
map.isValidZoomLevel = function(zoomLevel) {
var valid = ( (zoomLevel != null) &&
(zoomLevel >= options.minzoom) &&
(zoomLevel <= options.maxzoom) );
if(!valid && map.getZoom() == 0){
map.zoomTo(options.maxzoom - (options.maxzoom - options.minzoom)/2);
}
return valid;
}
I tried something like this and it works for me:
map.newMoveTo = map.moveTo;
map.moveTo = function(lonlat,zoom,options){
return(zoom>=maxZoom && zoom<=minZoom)?map.newMoveTo(lonlat,zoom,options):false;
};
The best answer I found (including an example) was at OpenLayers - limit the number of zoom levels . I don't paste it here, please see the instructions over there.
定义分辨率并没有解决问题(即使在v2.1中) - 我没有找到任何pernament修复,所以我在JS中创建了自己的zoombar - 这就是我建议任何遇到使用自定义的zoombar问题的人瓷砖。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.