大眾運輸開關

此範例示範如何使用大眾運輸控制器，包含以下功能：
加入大眾運輸控制器：於 style.load 後新增 MassTransitControl
關閉指定交通圖層：使用 offTransit() 隱藏指定大眾運輸
顯示指定交通圖層：使用 onTransit() 顯示指定大眾運輸
info
詳細使用說明請參考「MassTransitControl」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>大眾運輸開關</title>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
      <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
      </style>
  </head>

  <body>
      <div id="map"></div>

      <script type="module">
        const map = await new mapPlus(document.getElementById("map"), {
          accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
          accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
          style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
          center: [121.51251734614822, 25.040224105188575],
          pitch: 0,
          bearing: 0,
          zoom: 13,
          maxZoom: 18,
          minZoom: 7,
        });

        map.on("style.load", () => {
          /* ══════════════════════════════════════════════════════════════════════════
          * 加入大眾運輸控制器：
          - 可調整 useButton，顯示/隱藏預設按鈕。
          ══════════════════════════════════════════════════════════════════════════ */
          const massTransit = new mapPlus.MassTransitControl({
            // 是否使用按鈕控制大眾運輸顯示/隱藏
            useButton: true,
          });

          // 添加大眾運輸控制器到地圖
          map.addControl(massTransit);


          /* ══════════════════════════════════════════════════════════════════════════
          * 關閉指定交通圖層：
          - 可調整 offTransit() 中的參數，關閉指定的交通圖層。
          ══════════════════════════════════════════════════════════════════════════ */
          // 關閉顯示捷運圖層
          // massTransit.offTransit("mrt");  

          // 關閉顯示火車圖層
          // massTransit.offTransit("train");  


          /* ══════════════════════════════════════════════════════════════════════════
          * 顯示指定交通圖層：
          - 可調整 onTransit() 中的參數，顯示指定的交通圖層。
          ══════════════════════════════════════════════════════════════════════════ */
          // 顯示捷運圖層
          // massTransit.onTransit("mrt");  

          // 顯示火車圖層
          // massTransit.onTransit("train");  
        });

      </script>
  </body>
</html>

<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>

<script type="module">
  const map = await new mapPlus(document.getElementById("map"), {
    accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
    accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
    center: [121.51251734614822, 25.040224105188575],
    pitch: 0,
    bearing: 0,
    zoom: 13,
    maxZoom: 18,
    minZoom: 7,
  });

  map.on("style.load", () => {
    /* ══════════════════════════════════════════════════════════════════════════
    * 加入大眾運輸控制器：
    - 可調整 useButton，顯示/隱藏預設按鈕。
    ══════════════════════════════════════════════════════════════════════════ */
    const massTransit = new mapPlus.MassTransitControl({
      // 是否使用按鈕控制大眾運輸顯示/隱藏
      useButton: true,
    });

    // 添加大眾運輸控制器到地圖
    map.addControl(massTransit);


    /* ══════════════════════════════════════════════════════════════════════════
    * 關閉指定交通圖層：
    - 可調整 offTransit() 中的參數，關閉指定的交通圖層。
    ══════════════════════════════════════════════════════════════════════════ */
    // 關閉顯示捷運圖層
    // massTransit.offTransit("mrt");  

    // 關閉顯示火車圖層
    // massTransit.offTransit("train");  


    /* ══════════════════════════════════════════════════════════════════════════
    * 顯示指定交通圖層：
    - 可調整 onTransit() 中的參數，顯示指定的交通圖層。
    ══════════════════════════════════════════════════════════════════════════ */
    // 顯示捷運圖層
    // massTransit.onTransit("mrt");  

    // 顯示火車圖層
    // massTransit.onTransit("train");  
  });

</script>

<style>
  body { margin: 0; padding: 0; }
  #map { width: 100vw; height: 100vh; }
</style>