即時路況工具

此範例示範如何加入即時路況控制器，包含以下功能：
加入路況控制器：於 style.load 後新增 TrafficFlowControl
info
詳細使用說明請參考「TrafficFlowControl」。
<!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',
          });

          /* ══════════════════════════════════════════════════════════════════════════
          * 加入路況控制器：
          - 可調整 useButton，顯示/隱藏預設按鈕。
          - 可調整 color，設定即時路況各自的顏色。
          ══════════════════════════════════════════════════════════════════════════ */
          map.on("style.load", () => {
            const trafficFlowCtrl = new mapPlus.TrafficFlowControl({
              // 是否使用按鈕控制即時路況的開關
              useButton: true,

              // 設定即時路況的顏色
              color: {
                // 順暢的
                freeFlow: '#64CB5A',

                // 車流量大
                slow: '#DDD632',

                // 車速緩慢
                queuing: '#F59554',

                // 壅塞的
                stationary: '#E02A5A',
              },
            });

            // 添加即時路況控制器到地圖
            map.addControl(trafficFlowCtrl, "top-right");
          });
      </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',
    });

    /* ══════════════════════════════════════════════════════════════════════════
    * 加入路況控制器：
    - 可調整 useButton，顯示/隱藏預設按鈕。
    - 可調整 color，設定即時路況各自的顏色。
    ══════════════════════════════════════════════════════════════════════════ */
    map.on("style.load", () => {
      const trafficFlowCtrl = new mapPlus.TrafficFlowControl({
        // 是否使用按鈕控制即時路況的開關
        useButton: true,

        // 設定即時路況的顏色
        color: {
          // 順暢的
          freeFlow: '#64CB5A',

          // 車流量大
          slow: '#DDD632',

          // 車速緩慢
          queuing: '#F59554',

          // 壅塞的
          stationary: '#E02A5A',
        },
      });

      // 添加即時路況控制器到地圖
      map.addControl(trafficFlowCtrl, "top-right");
    });
</script>

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