3

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

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

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

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

PS - 不幸的是，整个 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>

4

2 回答 2

0

我刚刚做了你想做的事，它对我有用。

创建地图时，我指定了最小/最大分辨率

  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])
}
于 2013-03-22T15:28:10.967 回答
0

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

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

由于世界视图是 0，而最地面视图是 19，那么如果当前视图小于最大值（选择的缩放级别），我们只需缩放到最大值。

这很好用。当我滚动鼠标缩小时，我确实闪烁了一下，超过了选择的最大缩放级别，但它不再缩小了。此外，此方法不需要我向地图图层添加分辨率数组，或在地图上设置最大/最小分辨率。（希望我能摆脱那种闪烁......嗯！）

于 2013-03-25T20:50:32.390 回答