【问题标题】:Min/max zoom level in OpenLayersOpenLayers 中的最小/最大缩放级别
【发布时间】:2011-05-13 12:58:39
【问题描述】:

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

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

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

还有其他方法可以做到这一点吗?

【问题讨论】:

    标签: javascript zooming openlayers openstreetmap cloudmade


    【解决方案1】:

    您可以覆盖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

    【讨论】:

    • 这不会调整缩放栏。
    • 大卫,抱歉忽略了控件。我已经添加了更多我的答案 - 请参阅编辑。本质上,您需要定义要允许的分辨率。
    • 虽然这个答案对控件不起作用,但它确实解决了我的问题,因为我想简单地限制用户缩放超过某个级别(通过滚轮或 zoomToExtent)。谢谢!
    • 对于像我这样仍坚持维护旧版 OL2 代码的人来说,这是添加缩放限制的最简洁方法。哈克,但与 OL2 的许多其他东西一样干净:)
    【解决方案2】:

    现在我在“视图”中使用它:

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

    而且效果很好

    【讨论】:

      【解决方案3】:

      此处的其他答案是指版本 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】:

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

        【讨论】:

          【解决方案5】:

          我尝试了这样的方法,它对我有用:

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

          【讨论】:

            【解决方案6】:

            我最终得到了这个解决方案,因为我不知道如何在我的设置中使用 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】:

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

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

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

              【讨论】:

              • 同意 - 这很讨厌,但是在几个徒劳无功的时间里搞砸了我并不真正关心的决议......
              • 这里也一样。奇怪的是,没有更直接的方法可以做到这一点,但是很好。无论如何,再次感谢。
              【解决方案8】:

              定义分辨率并不能解决问题(即使在 v2.1 中) - 我没有找到任何永久性修复,所以我在 JS 中制作了自己的缩放栏 - 这就是我向任何遇到问题的人推荐的使用自定义图块的缩放栏。

              【讨论】:

              • 我发现定义分辨率非常有效。不过我确实需要做一些数学运算。
              【解决方案9】:

              XYZ 层不支持 minZoomLevel,OSM 是其子类。

              请参阅以下票证以了解解决方法:

              【讨论】:

              • 这在 OpenLayers 3.0 下不再适用。请参阅我对 OpenLayers 3.0 的更新答案。
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2012-01-29
              相关资源
              最近更新 更多