简体   繁体   English

OpenLayers中的最小/最大缩放级别

[英]Min/max zoom level in OpenLayers

I'm using OpenLayers to display a map in a web page. 我正在使用OpenLayers在网页中显示地图。 I am using tiles from CloudMade, but the same issues occur with the Mapnik tiles from OpenStreetMap. 我正在使用来自CloudMade的磁贴,但OpenStreetMap中的Mapnik磁贴也会出现同样的问题。

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; 我尝试过使用minZoomLevel / maxZoomLevel / numZoomLevels属性; only the maxZoomLevel and numZoomLevels properties seem to work, whereas the minZoomLevel property seems to be completely ignored. 只有maxZoomLevelnumZoomLevels属性似乎可以工作,而minZoomLevel属性似乎完全被忽略。

Is there another way to accomplish this? 还有另一种方法来实现这一目标吗?

You could override the isValidZoomLevel function. 您可以覆盖isValidZoomLevel函数。 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 或者您需要覆盖可用的分辨率,请参阅此处的示例: http//dev.openlayers.org/examples/zoomLevels.html

minZoomLevel is not supported for XYZ layers, of which OSM is a subclass. XYZ层不支持minZoomLevel,其中OSM是子类。

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: 我发现限制XYZ层的maxZoom级别的最简单方法是覆盖getNumZoomLevels方法:

map.getNumZoomLevels = function(){
        return 10;
        };

This pevents zooming beyond level 10 and also draws the zoomBar control correctly. 这样可以在10级以上进行缩放,并且还可以正确绘制zoomBar控件。 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. 这个和zoomOffset选项的组合应该允许您轻松控制最小/最大缩放,而不必乱用分辨率或子类。

Other answers here refer to OpenLayers versions prior to version 3. 这里的其他答案指的是版本3之前的OpenLayers版本。

With OpenLayers 3, you can use the maxZoom map option when initializing the map, as follows: 使用OpenLayers 3,您可以在初始化地图时使用maxZoom map选项,如下所示:

    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 可以在OpenLayers文档中找到更多信息: 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. 我最终得到了这个解决方案,因为我无法弄清楚如何在我的设置中使用zoomOffset。

        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 . 我找到的最佳答案(包括一个例子)是在OpenLayers上 - 限制缩放级别的数量 I don't paste it here, please see the instructions over there. 我不在这里粘贴,请看那边的说明。

定义分辨率并没有解决问题(即使在v2.1中) - 我没有找到任何pernament修复,所以我在JS中创建了自己的zoombar - 这就是我建议任何遇到使用自定义的zoombar问题的人瓷砖。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM