zooming - OpenLayer Map 限制平移和缩放

Question

我是 OpenLayers 的新手，正在尝试弄清楚如何限制用户可以平移和向外缩放的数量。对于这个应用程序，用户在 map 中选择一个局部区域并单击一个按钮说要使用该区域，我们希望他们不能在该范围之外平移或缩小超过该范围。单击按钮时，我使用 map.GetExtent() 将 maxRestrictedExtent 和 maxExtent 设置为当前范围。我还通过调用 map.getResolution() 将 maxResolution 设置为当前分辨率。平移效果很好，但缩放效果不佳。用户仍然可以通过给定的分辨率缩小。

我添加了代码，每次范围发生变化时，都会打印出当前范围和分辨率。在第 6 个范围更改时，我设置了上面列出的三个 map 属性并打印出设置。这使我能够从完整的世界 View 放大到足够本地化的区域进行测试。在第 6 个范围更改时，我用鼠标滚轮缩小并查看所选的范围和分辨率。单击鼠标滚轮缩小后，下一个打印输出清楚地显示分辨率确实大于 map.maxResolution 的设置，并且我可以看到可视区域大于所选区域。我已经尝试了很多东西，包括设置 maxExtent，但似乎没有什么会导致最大可缩放范围受到限制。如果我愿意，我可以再次放大到完整的世界 View 。

下面您可以看到我编写的测试代码，它使用导航控件和 OSM 层实例化 map ，然后注册 map 的 moveend 事件，创建执行我所描述的回调函数，最后缩放最大程度。

有没有人知道我应该采取哪些不同的方式来限制缩小到所选最大范围的能力？我希望我不必手动将范围调整回最大范围内，但如果是这样，至少知道这会有所帮助。

附言- 不幸的是，整个 html 没有显示，因为从样式之前到样式之前，以及从样式之后开始都被作为 html 处理。唯一真正缺少的是我在主体的 onload 事件中调用了 init()。

<style type="text/css">    
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;         
    }
    #map {
        width: 100%;
        height: 100%;
        margin: 0;         
    } 
</style>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

var map;
var num;

function init(){
    map = new OpenLayers.Map('map', { controls: [] });       
    map.addControl(new OpenLayers.Control.Navigation());       
    map.addLayer(new OpenLayers.Layer.OSM());

    map.events.register("moveend", this, function (e) {
        if (num == 5)
        {
            map.maxExtent = map.getExtent();
            map.restrictedExtent = map.maxExtent;
            map.maxResolution = map.getResolution();
            console.log(num++ + ": Setting maxExtent/restrictedExtent: " + map.maxExtent + "; resolution: " + map.maxResolution);
        }
        else
        {
            console.log(num++ + ": Changed to extent: " + map.getExtent() + "; resolution: " + map.getResolution());
        }
    });

    num = 0;
    map.zoomToMaxExtent();
}
</script>

Answer 1

我刚刚完成了您想要做的事情，而且它对我有用。

当我创建 map 时，我指定了最小/最大分辨率

  map = new OpenLayers.Map('map_element', {
    minResolution: 0.02197265625,
    maxResolution: 0.00274658203125
});

添加图层时，我还指定了一个 serverResolutions 列表。

    var tilecache_disk_layer = new OpenLayers.Layer.TileCache("TileCache Layer",
        ["http://" + tilecache_host + "/tilecache/"],
        "basic",
        {
         serverResolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 
                        0.0439453125, 0.02197265625, 0.010986328125, 
                        0.0054931640625, 0.00274658203125, 0.001373291015625, 
                        0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 
                        0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625]
        },
        {wrapDateLine: 'true'},
        {isBaseLayer: true}
    );

以下 javascript 向我的服务器发送请求以获取 map 参数。

  if (site_coords == undefined) {
    coordinates = sendHttpRequest("http://" + tile_host + "/ManagerApp/mapView?position=true");
    mapParameters = coordinates.split(",");       
    map.setCenter(new OpenLayers.LonLat(mapParameters[0], mapParameters[1]));
    map.minResolution = mapParameters[2];
    map.maxResolution = mapParameters[3];
    zoom_level = mapParameters[4];
    map.restrictedExtent = new OpenLayers.Bounds(mapParameters[5], mapParameters[6], mapParameters[7], mapParameters[8])
}