熱力圖

此範例示範如何建立熱力圖，包含以下功能：
建立熱力圖圖層：透過 randomData() 產生隨機點位資料，並使用 mapPlus.HeatmapLayer 設定熱力圖樣式與漸層色
定時刷新資料：使用 setInterval() 持續使用 setData() 實例方法來更新熱力圖分布
info
詳細使用參數說明請參考「熱力圖」。
<!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',
            accessToken: 'get_your_token',
            style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
            center: [121.53559860212545, 25.028808142529132],
            zoom: 14,
          });

          function randomData() {
            const data = [];
            for (let i = 0; i < 300; i++) {
              data.push({
                location: [
                  121.53559860212545 + (Math.random() * 2 - 1) * 0.01,
                  25.028808142529132 + (Math.random() * 2 - 1) * 0.01,
                ],
                weight: Math.random(),
              });
            }
            return data;
          }
          
          /* ══════════════════════════════════════════════════════════════════════════
          * 建立熱力圖圖層及調整樣式：
          - 調整 opacity 可設置熱力圖透明度。
          - 調整 radius 可設置熱力圖半徑。
          - 調整 maxIntensity 可設置熱力圖最大強度的數值。
          - 調整 gradient 可設置熱力圖漸層色。
          ══════════════════════════════════════════════════════════════════════════ */
          const heatmapLayer = new mapPlus.HeatmapLayer({
            // new mapPlus() 返回的物件
            map: map,

            // 熱力圖資料
            data: randomData(),

            // 熱力圖透明度
            opacity: 0.6,

            // 熱力圖半徑
            radius: 30,

            // 熱力圖最大強度的數值
            maxIntensity: 1,

            // 熱力圖漸層色
            gradient: ["#0000FF", "#00FF00", "#FFFF00", "#FF0000"],
          });

          // 定時刷新資料
          setInterval(() => {
            heatmapLayer.setData(randomData());
          }, 3000);

      </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',
      accessToken: 'get_your_token',
      style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
      center: [121.53559860212545, 25.028808142529132],
      zoom: 14,
    });

    function randomData() {
      const data = [];
      for (let i = 0; i < 300; i++) {
        data.push({
          location: [
            121.53559860212545 + (Math.random() * 2 - 1) * 0.01,
            25.028808142529132 + (Math.random() * 2 - 1) * 0.01,
          ],
          weight: Math.random(),
        });
      }
      return data;
    }

    /* ══════════════════════════════════════════════════════════════════════════
    * 建立熱力圖圖層及調整樣式：
    - 調整 opacity 可設置熱力圖透明度。
    - 調整 radius 可設置熱力圖半徑。
    - 調整 maxIntensity 可設置熱力圖最大強度的數值。
    - 調整 gradient 可設置熱力圖漸層色。
    ══════════════════════════════════════════════════════════════════════════ */
    const heatmapLayer = new mapPlus.HeatmapLayer({
      // new mapPlus() 返回的物件
      map: map,

      // 熱力圖資料
      data: randomData(),

      // 熱力圖透明度
      opacity: 0.6,

      // 熱力圖半徑
      radius: 30,

      // 熱力圖最大強度的數值
      maxIntensity: 1,

      // 熱力圖漸層色
      gradient: ["#0000FF", "#00FF00", "#FFFF00", "#FF0000"],
    });

    // 定時刷新資料
    setInterval(() => {
      heatmapLayer.setData(randomData());
    }, 3000);

</script>

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