マップにコントロールを追加する

[アーティクル]
11/11/2024

この記事では、すべてのコントロールおよびスタイルピッカーでマップを作成する方法など、マップにコントロールを追加する方法について説明します。

ズームコントロールを追加する

ズームコントロールは、マップを拡大または縮小するためのボタンを追加します。次のコードサンプルでは、ZoomControl クラスのインスタンスを作成して、マップの右下隅に追加します。

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

ピッチコントロールを追加する

ピッチコントロールでは、水平線を基準としてマップを傾けるためのボタンを追加します。次のコードサンプルでは、PitchControl クラスのインスタンスを作成します。 PitchControl がマップの右上隅に追加されます。

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

コンパスコントロールを追加する

コンパスコントロールは、マップを回転するためのボタンを追加します。次のコードサンプルでは、CompassControl クラスのインスタンスを作成し、マップの左下隅に追加します。

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

スケールコントロールを追加する

スケールコントロールは、マップにスケールバーを追加します。次のコードサンプルでは、ScaleControl クラスのインスタンスを作成し、マップの左下隅に追加します。

//Construct a scale control and add it to the map.
map.controls.add(new atlas.control.ScaleControl(), {
    position: 'bottom-left'
});

全画面表示コントロールを追加する

全画面表示コントロールには、全画面表示と通常表示の間のマップまたは指定された HTML 要素を切り替えるためのボタンが追加されます。次のコードサンプルでは、FullscreenControl クラスのインスタンスを作成し、マップの右上隅に追加します。

//Construct a fullscreen control and add it to the map.
map.controls.add(new atlas.control.FullscreenControl(), {
    position: 'top-right'
});

すべてのコントロールを含むマップ

開発を簡略化するため、複数のコントロールを 1 つの配列に格納し、すべてを一度にマップに追加して、マップの同じ領域に配置することができます。次のコードスニペットでは、この方法を使用して標準のナビゲーションコントロールをマップに追加します。

map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.PitchControl(),
    new atlas.control.CompassControl(),
    new atlas.control.StyleControl(),
    new atlas.control.FullscreenControl(),
    new atlas.control.ScaleControl(),
  ],
  {
    position: 'top-right',
  }
);

次の画像では、ズーム、ピッチ、コンパス、スタイル、全画面表示、およびスケールのコントロールをマップの右上隅に表示しています。どのように自動的にスタックされるかに注目してください。スクリプト内のコントロールオブジェクトの順序により、マップに表示される順序が決まります。マップ上のコントロールの順序を変更するために、配列内でコントロールの順序を変更できます。