幀率控制器

此範例示範如何加入幀率控制器，包含以下功能：
加入幀率控制器：建立 FrameRateControl 並設定外觀選項後加入地圖
info
詳細使用說明請參考「FrameRateControl」。
<!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',
          });

          /* ══════════════════════════════════════════════════════════════════════════
          * 加入幀率控制器：
          - 可調整 color / font，設定 FPS 文字與柱狀圖顏色及字體。
          - 可調整 background，設定控制器背景顏色。
          - 可調整 width / graphWidth / graphHeight，設定控制器尺寸。
          - 可調整 graphTop / graphTop，設定控制器圖表距離。
          - 可調整 barWidth，設定柱狀圖寬度。
          ══════════════════════════════════════════════════════════════════════════ */
          const fpsControl = new mapPlus.FrameRateControl({
            // FPS 文字與柱狀圖顏色
            color: '#7cf859',

            // 控制器背景顏色
            background: 'rgba(0,0,0,0.9)',

            // 字體
            // font: 'Monaco, Consolas, Courier, monospace',

            // 控制器寬度（像素 × devicePixelRatio）
            // width: 100 * window.devicePixelRatio,

            // 圖表寬度
            // graphWidth: 90 * window.devicePixelRatio,

            // 圖表高度
            // graphHeight: 60 * window.devicePixelRatio,

            // 圖表頂部距離
            // graphTop: 0,

            // 圖表右側距離
            // graphTop: 5 * window.devicePixelRatio,

            // 柱狀圖寬度
            // barWidth: 4 * window.devicePixelRatio,
          });

          // 添加幀率控制器到地圖（可調整位置：'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'）
          map.addControl(fpsControl, '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',
    });

    /* ══════════════════════════════════════════════════════════════════════════
    * 加入幀率控制器：
    - 可調整 color / font，設定 FPS 文字與柱狀圖顏色及字體。
    - 可調整 background，設定控制器背景顏色。
    - 可調整 width / graphWidth / graphHeight，設定控制器尺寸。
    - 可調整 graphTop / graphTop，設定控制器圖表距離。
    - 可調整 barWidth，設定柱狀圖寬度。
    ══════════════════════════════════════════════════════════════════════════ */
    const fpsControl = new mapPlus.FrameRateControl({
      // FPS 文字與柱狀圖顏色
      color: '#7cf859',

      // 控制器背景顏色
      background: 'rgba(0,0,0,0.9)',

      // 字體
      // font: 'Monaco, Consolas, Courier, monospace',

      // 控制器寬度（像素 × devicePixelRatio）
      // width: 100 * window.devicePixelRatio,

      // 圖表寬度
      // graphWidth: 90 * window.devicePixelRatio,

      // 圖表高度
      // graphHeight: 60 * window.devicePixelRatio,

      // 圖表頂部距離
      // graphTop: 0,

      // 圖表右側距離
      // graphTop: 5 * window.devicePixelRatio,

      // 柱狀圖寬度
      // barWidth: 4 * window.devicePixelRatio,
    });

    // 添加幀率控制器到地圖（可調整位置：'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'）
    map.addControl(fpsControl, 'top-right');
</script>

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