什麼是控制元件（Controls）？

控制元件是 Leaflet 中讓使用者與地圖進行互動的重要部分。它們通常是一些位於地圖四個角落的小工具，例如縮放按鈕、圖層選擇器或比例尺。Leaflet 提供了一些內建的控制元件，並允許開發者自定義和添加自己的控件。

內建控制元件

Leaflet 提供了幾個預設的控制元件，這些控件通常能夠滿足基本需求。以下是三個常用的內建控制元件

縮放控制

縮放控制通常會自動出現在地圖的右下角，它允許使用者放大或縮小地圖。這是最常見的控制元件，通過 L.control.zoom 來啟用或禁用它。

// 默認啟用的縮放控制
var map = L.map('map', {
  zoomControl: true
});
map.zoomControl.remove();

比例尺控制

比例尺控制能顯示當前地圖的比例尺，幫助使用者了解地圖上的距離

L.control.scale().addTo(map);

圖層控制

圖層控制允許用戶在不同的地圖圖層（例如街道圖和衛星圖）之間切換，也可以用來顯示/隱藏地圖上的數據圖層。

var streetMap = L.tileLayer(...);
var satelliteMap = L.tileLayer(...);
var baseMaps = {
  "Street Map": streetMap,
  "Satellite Map": satelliteMap
};
L.control.layers(baseMaps).addTo(map);

自定義控制元件

除了內建的控件，你還可以自定義自己的控制元件，這能讓地圖與使用者的互動更加靈活。Leaflet 允許你使用 L.control 創建自定義控件，並使用 onAdd 方法來定義控件的行為。
以下是重製地圖元件的範例

var MyCustomControl = L.Control.extend({
  options: {
    position: 'topright'
  },
  onAdd: function(map) {
    var controlDiv = L.DomUtil.create('div', 'my-custom-control');
    controlDiv.innerHTML = '<button>重置地圖</button>';
    controlDiv.onclick = function() {
      map.setView([51.505, -0.09], 13);
    };
    
    return controlDiv;
  }
});
map.addControl(new MyCustomControl());

調整控制元件的位置與樣式

Leaflet 的控件預設會顯示在地圖的四個角落，但你可以自定義其位置和樣式。常見的位置有 topleft、topright、bottomleft 和 bottomright。你也可以使用 CSS 修改控件的外觀，使其符合你的設計需求。

var zoomControl = L.control.zoom({
  position: 'bottomright'
}).addTo(map);

總結

控制元件在地圖應用中起著重要的作用，無論是縮放、切換圖層，還是提供自定義功能，這些控件都讓使用者能夠更方便地與地圖交互。通過自定義控件和樣式，你可以根據實際需求靈活地構建自己的地圖應用。