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

[アーティクル]
06/02/2023

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

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

ズームコントロールは、マップを拡大または縮小するためのボタンを追加します。次のコードサンプルでは、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'
});

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

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

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

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