樣式切換工具

此範例示範如何切換地圖樣式，包含以下功能：
加入樣式切換控制器：建立 StyleModeControl 並設定預設樣式及加入日間模式
動態新增並切換樣式：使用 addStyleMode() 新增模式，setStyleMode() 切換顯示
info
詳細使用說明請參考「StyleModeControl」。
<!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.52251734614822, 25.026224105188575], // 地圖中心點
          pitch: 80,
          bearing: 0,
          zoom: 15,
          maxZoom: 18,
          minZoom: 7,
        });

        map.on("style.load", () => {
          /* ══════════════════════════════════════════════════════════════════════════
          * 加入樣式切換控制器：
          - 可調整 useButton，顯示/隱藏預設按鈕。
          - 可調整 styleList，添加其他地圖樣式。
          ══════════════════════════════════════════════════════════════════════════ */
          const styleMode = new mapPlus.StyleModeControl({
            // 是否使用按鈕控制風格模式
            useButton: true,

            // 要添加的地圖樣式
            styleList: {
              day: {
                // 樣式名稱
                title: "日間模式",

                // 天空顏色
                sky: "#4790b8",

                // .etxt 樣式檔
                style: "https://kw3dmap.localking.com.tw/openapi/map/ev_day.etxt",
              },
              night: {
                 title: '夜間模式',
                 sky: '#0e2836',
                 style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt',
              },
            },
          });

          // 添加樣式切換控制器到地圖
          map.addControl(styleMode);


          /* ══════════════════════════════════════════════════════════════════════════
          * 動態新增並切換樣式：
          - 可動態新增自訂的樣式，並更換 title/sky/style 參數。
          - 可調整 setStyleMode() 中的參數，設定欲切換顯示的樣式。
          ══════════════════════════════════════════════════════════════════════════ */
          // 動態新增自訂的夜間樣式
          // styleMode.addStyleMode("custom-night", {
          //   title: "自訂夜間模式",
          //   sky: "#0e2836",
          //   style: "https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt",
          // });

          // 切換為日間樣式
          styleMode.setStyleMode("day");

          // 切換為夜間樣式
          // styleMode.setStyleMode("night");

          // 切換為預設樣式
          // styleMode.setStyleMode("");
        });

      </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.52251734614822, 25.026224105188575], // 地圖中心點
    pitch: 80,
    bearing: 0,
    zoom: 15,
    maxZoom: 18,
    minZoom: 7,
  });

  map.on("style.load", () => {
    /* ══════════════════════════════════════════════════════════════════════════
    * 加入樣式切換控制器：
    - 可調整 useButton，顯示/隱藏預設按鈕。
    - 可調整 styleList，添加其他地圖樣式。
    ══════════════════════════════════════════════════════════════════════════ */
    const styleMode = new mapPlus.StyleModeControl({
      // 是否使用按鈕控制風格模式
      useButton: true,

      // 要添加的地圖樣式
      styleList: {
        day: {
          // 樣式名稱
          title: "日間模式",

          // 天空顏色
          sky: "#4790b8",

          // .etxt 樣式檔
          style: "https://kw3dmap.localking.com.tw/openapi/map/ev_day.etxt",
        },
        night: {
           title: '夜間模式',
           sky: '#0e2836',
           style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt',
        },
      },
    });

    // 添加樣式切換控制器到地圖
    map.addControl(styleMode);


    /* ══════════════════════════════════════════════════════════════════════════
    * 動態新增並切換樣式：
    - 可動態新增自訂的樣式，並更換 title/sky/style 參數。
    - 可調整 setStyleMode() 中的參數，設定欲切換顯示的樣式。
    ══════════════════════════════════════════════════════════════════════════ */
    // 動態新增自訂的夜間樣式
    // styleMode.addStyleMode("custom-night", {
    //   title: "自訂夜間模式",
    //   sky: "#0e2836",
    //   style: "https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt",
    // });

    // 切換為日間樣式
    styleMode.setStyleMode("day");

    // 切換為夜間樣式
    // styleMode.setStyleMode("night");

    // 切換為預設樣式
    // styleMode.setStyleMode("");
  });

</script>

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