を使用したマップのエクステントの設定 MapLibre

ユーザーに全世界を画面移動したりズームしてほしくない場合もあるでしょう。 MapLibreのマップコントロールを使用している場合は、 maxBoundsオプションを使用してマップコントロールの範囲 または境界 を制限し、 minZoom オプションと maxZoomオプションを使用してズームを制限できます。

次のコード例は、マップコントロールを初期化して画面移動を特定の境界 (この場合は Grab データソースの範囲) に制限する方法を示しています。

注記

これらのサンプルは にあり JavaScript、Amazon Location Service を使用するウェブアプリケーションを作成するチュートリアルのコンテキスト内で動作します。

// Set bounds to Grab data provider region 
var bounds = [
        [90.0, -21.943045533438166], // Southwest coordinates
        [146.25, 31.952162238024968] // Northeast coordinates
    ];

var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxBounds: bounds // Sets bounds as max
    transformRequest,
    }
);

同様に、マップの最小ズームレベルと最大ズームレベルを設定できます。どちらの値も 0 ～ 24 の範囲ですが、デフォルトは最小ズームが 0、最大ズームが 22 です (データプロバイダーは、すべてのズームレベルでデータを提供するとは限りません。ほとんどのマップライブラリはこれを自動的に処理します)。次の例では、 MapLibre マップコントロールの minZoomおよび maxZoomオプションを初期化します。

// Set the minimum and maximum zoom levels 
var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxZoom: 12,
    minZoom: 5,
    transformRequest,
    }
);

ヒント

MapLibre Map コントロールでは、初期化中ではなく、ランタイムにこれらのオプションを get... および set...関数で設定することもできます。例えば、getMaxBounds と setMaxBounds を使用してランタイムにマップ境界を変更できます。