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

时间:2010-11-21 21:56:21

标签: javascript zoom openlayers openstreetmap cloudmade

我正在使用OpenLayers在网页中显示地图。我正在使用来自CloudMade的磁贴,但OpenStreetMap中的Mapnik磁贴出现了同样的问题。

我正在尝试限制地图,以便用户无法一直缩放到世界视图 - 我希望它们大致保持在城市级别缩放。

我尝试过使用minZoomLevel / maxZoomLevel / numZoomLevels属性;只有maxZoomLevelnumZoomLevels属性似乎有效,而minZoomLevel属性似乎完全被忽略。

还有另一种方法可以实现这个目标吗?

9 个答案:

答案 0 :(得分:11)

您可以覆盖isValidZoomLevel功能。这样的事情(未经测试):

OpenLayers.Map.isValidZoomLevel = function(zoomLevel) {
   return ( (zoomLevel != null) &&
      (zoomLevel >= 2) && // set min level here, could read from property
      (zoomLevel < this.getNumZoomLevels()) );
}

修改

或者您需要覆盖可用的分辨率,请参阅此处的示例:http://dev.openlayers.org/examples/zoomLevels.html

答案 1 :(得分:9)

XYZ图层不支持

minZoomLevel,其中OSM是子类。

请参阅以下故障单以获取解决方法:

答案 2 :(得分:6)

我发现限制XYZ图层的maxZoom级别的最简单方法是覆盖getNumZoomLevels方法:

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

这可以在10级以上进行缩放,并且还可以正确绘制zoomBar控件。这个和zoomOffset选项的组合应该可以让您轻松控制最小/最大缩放,而不必乱用分辨率或子类。

答案 3 :(得分:2)

此处的其他答案指的是版本3之前的OpenLayers版本。

使用OpenLayers 3,您可以在初始化地图时使用maxZoom地图选项,如下所示:

    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
        })
    });

可以在OpenLayers文档中找到更多信息:http://openlayers.org/en/v3.0.0/doc/tutorials/concepts.html

答案 4 :(得分:1)

现在我在&#34; View&#34;:

中使用它
view: new ol.View({
    center: ol.proj.transform([-3.707524, 40.485644], 'EPSG:4326',EPSG:3857'),
    zoom: 15,
    maxZoom: 17,
    minZoom: 6
}),

它工作正常

答案 5 :(得分:0)

定义分辨率并不能解决问题(即使在v2.1中) - 我没有找到任何针对此的修复程序,因此我在JS中创建了自己的zoombar - 这就是我向任何遇到问题的人推荐的内容使用自定义图块的zoombar。

答案 6 :(得分:0)

我最终得到了这个解决方案,因为我无法弄清楚如何在我的设置中使用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;
        }

答案 7 :(得分:0)

我尝试了类似这样的东西,它对我有用:

map.newMoveTo = map.moveTo;
map.moveTo = function(lonlat,zoom,options){
    return(zoom>=maxZoom && zoom<=minZoom)?map.newMoveTo(lonlat,zoom,options):false;
};

答案 8 :(得分:0)

我找到的最佳答案(包括一个例子)是OpenLayers - limit the number of zoom levels。我不在这里粘贴,请看那边的说明。