動態叢集圖

此範例示範如何建立動態叢集圖，包含以下功能：
建立叢集資料：透過 randomData() 產生隨機點位資料，並使用 mapPlus.DynamicCluster(options) 開始使用地圖動態叢集
定時刷新資料：使用 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 < 50; i++) {
              data.push({
                id: i,
                position: [
                  121.53559860212545 + (Math.random() * 2 - 1) * 0.005,
                  25.028808142529132 + (Math.random() * 2 - 1) * 0.005,
                ],
              });
            }
            return data;
          }
          
          function markerRenderer({ id, position }) {
            return {
              key: id,
              position,
            };
          }
          
          /* ══════════════════════════════════════════════════════════════════════════
          * 建立叢集資料及調整樣式：
          - 調整 styles 中的 key 值，可自訂叢集點數量達到多少個時，會變更為另一個叢集圓圈樣式。
          - 調整 radius 可設置叢集圓圈半徑。
          - 調整 fillColor/fillOpacity 可分別設置叢集圓圈填色/填色透明度。
          - 調整 strokeColor/strokeOpacity/strokeWidth 可分別設置叢集圓圈外框顏色/透明度/寬度。
          - 調整 textColor/textSize 可分別設置叢集圓圈文字顏色/大小。
          ══════════════════════════════════════════════════════════════════════════ */
          const styles = {
            // 叢集預設圓圈樣式
            default: {  
              // 叢集圓圈半徑
              // radius: 20,

              // 叢集圓圈填色
              // fillColor: '#98FB98',

              // 叢集圓圈填色透明度
              // fillOpacity: .6,

              // 叢集圓圈外框顏色
              // strokeColor: '#98FB98',

              // 叢集圓圈外框透明度
              // strokeOpacity: 1,

              // 叢集圓圈外框寬度
              // strokeWidth: 3,

              // 叢集圓圈文字顏色
              // textColor: '#000000',

              // 叢集圓圈文字大小
              // textSize: 12,
            },

            // 當叢集點數量達到 5 個以上的圓圈樣式（可自訂數量）
            5: {
              // radius: 30,
              // fillColor: '#FFD700',
              // strokeColor: '#FFD700',
            },

            // 叢集點數量達到 8 個以上的圓圈樣式（可自訂數量）
            8: {
              // radius: 35,
              // fillColor: '#FF6347',
              // strokeColor: '#FF6347',
            }
          }

          // 建立動態叢集圖
          const dynamicCluster = new mapPlus.DynamicCluster({
            // 動態叢集的資料
            data: randomData(),

            // 渲染地標的回調函式
            markerRenderer,

            // 叢集圖的樣式
            styles,
          });
          
          // 定時刷新資料
          setInterval(() => {
            dynamicCluster.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 < 50; i++) {
        data.push({
          id: i,
          position: [
            121.53559860212545 + (Math.random() * 2 - 1) * 0.005,
            25.028808142529132 + (Math.random() * 2 - 1) * 0.005,
          ],
        });
      }
      return data;
    }

    function markerRenderer({ id, position }) {
      return {
        key: id,
        position,
      };
    }

    /* ══════════════════════════════════════════════════════════════════════════
    * 建立叢集資料及調整樣式：
    - 調整 styles 中的 key 值，可自訂叢集點數量達到多少個時，會變更為另一個叢集圓圈樣式。
    - 調整 radius 可設置叢集圓圈半徑。
    - 調整 fillColor/fillOpacity 可分別設置叢集圓圈填色/填色透明度。
    - 調整 strokeColor/strokeOpacity/strokeWidth 可分別設置叢集圓圈外框顏色/透明度/寬度。
    - 調整 textColor/textSize 可分別設置叢集圓圈文字顏色/大小。
    ══════════════════════════════════════════════════════════════════════════ */
    const styles = {
      // 叢集預設圓圈樣式
      default: {  
        // 叢集圓圈半徑
        // radius: 20,

        // 叢集圓圈填色
        // fillColor: '#98FB98',

        // 叢集圓圈填色透明度
        // fillOpacity: .6,

        // 叢集圓圈外框顏色
        // strokeColor: '#98FB98',

        // 叢集圓圈外框透明度
        // strokeOpacity: 1,

        // 叢集圓圈外框寬度
        // strokeWidth: 3,

        // 叢集圓圈文字顏色
        // textColor: '#000000',

        // 叢集圓圈文字大小
        // textSize: 12,
      },

      // 當叢集點數量達到 5 個以上的圓圈樣式（可自訂數量）
      5: {
        // radius: 30,
        // fillColor: '#FFD700',
        // strokeColor: '#FFD700',
      },

      // 叢集點數量達到 8 個以上的圓圈樣式（可自訂數量）
      8: {
        // radius: 35,
        // fillColor: '#FF6347',
        // strokeColor: '#FF6347',
      }
    }

    // 建立動態叢集圖
    const dynamicCluster = new mapPlus.DynamicCluster({
      // 動態叢集的資料
      data: randomData(),

      // 渲染地標的回調函式
      markerRenderer,

      // 叢集圖的樣式
      styles,
    });

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

</script>

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