web-dev-qa-db-ja.com

OpenLayersの最小/最大ズームレベル

OpenLayersを使用してWebページに地図を表示しています。 CloudMadeのタイルを使用していますが、OpenStreetMapのMapnikタイルでも同じ問題が発生します。

ユーザーが世界観までズームアウトできないようにマップを制限しようとしています。少なくとも、ほぼ都市レベルのズームを維持する必要があります。

minZoomLevel/maxZoomLevel/numZoomLevelsプロパティを使用してみました。 maxZoomLevelプロパティとnumZoomLevelsプロパティのみが機能しているように見えますが、minZoomLevelプロパティは完全に無視されているようです。

これを達成する別の方法はありますか？

javascriptzoomopenlayersopenstreetmapcloudmade
20
David Pfeffer

minZoomLevelは、OSMがサブクラスであるXYZレイヤーではサポートされていません。

回避策については、次のチケットを参照してください。

9
geographika

isValidZoomLevel関数をオーバーライドできます。このようなもの（テストされていません）：

OpenLayers.Map.isValidZoomLevel = function(zoomLevel) {
   return ( (zoomLevel != null) &&
      (zoomLevel >= 2) && // set min level here, could read from property
      (zoomLevel < this.getNumZoomLevels()) );
}

[〜＃〜]編集[〜＃〜]

または、使用可能な解像度をオーバーライドする必要があります。ここの例を参照してください： http://dev.openlayers.org/examples/zoomLevels.html

11
Jonathan

XYZレイヤーのmaxZoomレベルを制限する最も簡単な方法は、getNumZoomLevelsメソッドをオーバーライドすることでした。

map.getNumZoomLevels = function(){
        return 10;
        };

これにより、レベル10を超えるズームが発生し、zoomBarコントロールが正しく描画されます。これとzoomOffsetオプションの組み合わせにより、解像度やサブクラスをいじくり回すことなく、最小/最大ズームを簡単に制御できるようになります。

7
Graham

ここでの他の回答は、バージョン3より前のOpenLayersバージョンを参照しています。

OpenLayers 3では、次のように、マップを初期化するときにmaxZoomマップオプションを使用できます。

    var map = new ol.Map({
        target: 'mapcontainer-001',
        layers: layers,  // Layers need to be initialized previously
        view: new ol.View({
          center: ol.proj.transform([-5.12345, 42.12345], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12,
          maxZoom: 19
        })
    });

詳細については、OpenLayersのドキュメントを参照してください： http://openlayers.org/en/v3.0.0/doc/tutorials/concepts.html

2
jjmontes

今、私はこれを「ビュー」で使用します。

view: new ol.View({
    center: ol.proj.transform([-3.707524, 40.485644], 'EPSG:4326',EPSG:3857'),
    zoom: 15,
    maxZoom: 17,
    minZoom: 6
}),

そしてそれはうまくいきます

1
Fernando Sanchiz

私はこのようなことを試しました、そしてそれは私のために働きます：

map.newMoveTo = map.moveTo;
map.moveTo = function(lonlat,zoom,options){
    return(zoom>=maxZoom && zoom<=minZoom)?map.newMoveTo(lonlat,zoom,options):false;
};
0
Akna

セットアップでzoomOffsetを使用する方法がわからなかったため、このソリューションに行き着きました。

        map.getNumZoomLevels = function(){
            return (options.maxzoom-options.minzoom+1);
        };

        map.isValidZoomLevel = function(zoomLevel) {
            var valid = ( (zoomLevel != null) &&
                (zoomLevel >= options.minzoom) &&
                (zoomLevel <= options.maxzoom) );
            if(!valid && map.getZoom() == 0){
                map.zoomTo(options.maxzoom - (options.maxzoom - options.minzoom)/2);

            }
            return valid;
        }
0
netbrain

解像度を定義しても問題は解決しません（v2.1でも）-これに対するパーナメントの修正が見つからなかったので、JSで独自のズームバーを作成しました-カスタムを使用してズームバーで問題が発生した場合は、これをお勧めしますタイル。

0
biphobe

私が見つけた最良の答え（例を含む）は OpenLayers-ズームレベルの数を制限する でした。ここには貼り付けません。あそこの説明をご覧ください。

0
nachtigall