Question

我是OpenLayers的新手，我正试图弄清楚如何限制用户可以平移并向外缩放的数量。对于此应用程序，用户在地图中选择一个局部区域并单击一个说明使用该区域的按钮，我们希望它们不能在该范围之外平移或缩小。单击该按钮时，我使用map.GetExtent（）将maxRestrictedExtent和maxExtent设置为当前范围。我还通过调用map.getResolution（）将maxResolution设置为当前分辨率。平移工作完美，但缩放不是。用户仍然可以缩小通过给定的分辨率。

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

下面你可以看到我编写的测试代码，它使用Navigation控件和OSM层实例化一个地图，然后注册地图的moveend事件，创建一个回调函数，完成我所描述的内容，最后缩放到最大程度。

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

P.S。 - 不幸的是整个html没有显示，因为从风格到风格之前，以及从最终被处理为html之后。唯一真正缺少的是我在body的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 = 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向我的服务器发送请求以获取地图参数。

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

Answer 2

所以这是我的答案。经过大量搜索，发布和发送电子邮件后，我发现有人告诉我一个简单的答案。我已经注册了“moveend”事件，捕捉所有范围的动作，以便我可以看看发生了什么。答案是在类上声明一个私有int变量（maxZoomLevel），它在第一次绘制地图时的值为零，因为我正在绘制世界视图以启动，然后设置为当前缩放级别getZoom（）在用户点击按钮时，选择要使用的当前区域。那么“moveend”事件的注册就像这样：

    map.events.register("moveend", this, function (e) {
        if (map.getZoom() < maxZoomLevel)
        {
            map.zoomTo(maxZoomLevel);
        }
    });

由于世界视图为0，最地面视图为19，如果当前视图小于最大值（所选缩放级别），我们只需缩放到最大值

这很有效。当我滚动鼠标以缩小通过最大选择的缩放级别时，我会闪烁一些，但它不再缩小通过它。此外，此方法不需要我将分辨率数组添加到地图图层，或者在地图上设置最大/最小分辨率。（希望我能摆脱那种闪烁......嗯！）

OpenLayer Map限制平移和缩放

2 个答案: