我是OpenLayers的新手,正在尝试弄清楚如何限制用户平移和缩放的程度。对于这个应用程序,用户可以在地图上选择一个本地区域并单击一个按钮以使用该区域,我们希望他们不能超出该范围进行平移或缩小。当单击按钮时,我使用map.GetExtent()将maxRestrictedExtent和maxExtent都设置为当前范围。我还通过调用map.getResolution()将maxResolution设置为当前分辨率。平移工作得很好,但缩放不起作用。用户仍然能够缩小至给定分辨率以下。
我已经添加了代码,每次范围发生变化时,都会打印出当前范围和分辨率。在第6次范围更改时,我设置了上述三个地图属性并打印出设置。这使我能够从完整的世界视图缩放到一个足够局部的区域进行测试。在第6次范围更改时,我使用鼠标滚轮缩小并看到所选的范围和分辨率。在鼠标滚轮点击缩小后,下一次的打印输出清楚地显示分辨率确实大于map.maxResolution的设置,并且我可以看到可视区域大于所选区域。我尝试过许多方法,包括设置maxExtent,但似乎没有任何方法可以限制最大缩放范围。如果需要,我可以随意缩放至完整的世界视图。
下面是我编写的测试代码,它使用导航控件和OSM图层实例化一个地图,然后注册地图的moveend事件,创建一个回调函数来执行我所描述的操作,并最终缩放到最大范围。
有没有人有什么想法,可以使我限制缩小至所选最大范围的能力?我希望不必手动将范围调整回到最大范围内,但如果确实需要这样做,至少知道这一点会有所帮助。
注:遗憾的是,整个HTML不能显示出来,因为从...到style之间以及最后一个之后的所有内容都被处理为HTML。唯一真正缺失的是我在body的onload事件中调用了init()。
我已经添加了代码,每次范围发生变化时,都会打印出当前范围和分辨率。在第6次范围更改时,我设置了上述三个地图属性并打印出设置。这使我能够从完整的世界视图缩放到一个足够局部的区域进行测试。在第6次范围更改时,我使用鼠标滚轮缩小并看到所选的范围和分辨率。在鼠标滚轮点击缩小后,下一次的打印输出清楚地显示分辨率确实大于map.maxResolution的设置,并且我可以看到可视区域大于所选区域。我尝试过许多方法,包括设置maxExtent,但似乎没有任何方法可以限制最大缩放范围。如果需要,我可以随意缩放至完整的世界视图。
下面是我编写的测试代码,它使用导航控件和OSM图层实例化一个地图,然后注册地图的moveend事件,创建一个回调函数来执行我所描述的操作,并最终缩放到最大范围。
有没有人有什么想法,可以使我限制缩小至所选最大范围的能力?我希望不必手动将范围调整回到最大范围内,但如果确实需要这样做,至少知道这一点会有所帮助。
注:遗憾的是,整个HTML不能显示出来,因为从...到style之间以及最后一个之后的所有内容都被处理为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>