將控制項新增至地圖

發行項
11/08/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'
});

具有所有控制項的地圖

您可以將多個控制項放入陣列中，一次新增至地圖，並放置在地圖的相同區域中，以簡化開發。下列程式碼片段會使用此方法，將標準導覽控制項新增至地圖。

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',
  }
);

下圖顯示地圖，地圖右上角有縮放、間距、指南針、樣式、全螢幕和縮放控件。請注意其自動堆疊的方式。控制項物件在指令碼中的順序會決定它們出現在地圖上的順序。若要變更地圖上的控制項順序，您可以變更其在陣列中的順序。