私はOpenLayersを初めて使用し、ユーザーがパンして外側にズームできる量を制限する方法を見つけようとしています。このアプリケーションでは、ユーザーが地図内のローカルエリアを選択し、そのエリアを使用するように指示するボタンをクリックします。その範囲外にパンしたり、ズームアウトしたりできないようにする必要があります。ボタンがクリックされると、map.GetExtent（）を使用してmaxRestrictedExtentとmaxExtentの両方を現在のエクステントに設定しています。また、map.getResolution（）を呼び出して、maxResolutionを現在の解像度に設定しています。パンは完全に機能しますが、ズームは機能しません。ユーザーは、指定された解像度を超えてもズームアウトできます。
エクステントが変更されるたびに、現在のエクステントと解像度を出力するコードを追加しました。6番目のエクステントの変更で、上記の3つのマッププロパティを設定し、設定を印刷します。これにより、全世界のビューから、テストに十分なローカライズされた領域にズームインできます。6番目の範囲の変更で、マウスホイールでズームアウトし、選択された範囲と解像度を確認します。マウスホイールを1回クリックしてズームアウトすると、次の印刷出力は、解像度が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>