Skip to main content

介紹

資料層叢集功能可讓您在地圖上以叢集圖的方式顯示資料層中的點資料。

透過 map.data.enableCluster(true) 啟用叢集功能後，系統會自動將相近的點資料聚合成叢集，並可透過 addToCluster 屬性單獨控制每個點是否加入叢集。您也可以分別控制所有叢集點與非叢集點的顯示或隱藏。

開始使用​

新增資料點後，直接調用 map.data.enableCluster(true) 即可開始使用資料層叢集，詳情使用方法請參考 enableCluster。

範例

// 新增叢集資料點
for (let i = 0; i < 30; i++) {
  const lng = 121.4 + Math.random() * 0.3;
  const lat = 24.9 + Math.random() * 0.2;
  
  const newFeature = {
    geometry: new mapPlus.Data.Point({
      lng: lng,
      lat: lat,
    }),
    properties: {
      id: `point_${i}`,
      name: `點${i}`,
    },
  };
  
  map.data.add(newFeature);
}

// 啟用叢集功能
map.data.enableCluster(true);

叢集圖樣式​

可使用 enableCluster() 的 options.styles 來自訂叢集圖的樣式。

包含以下屬性：

  • circle (object)：叢集圓圈樣式

    屬性描述
    colors (string[])叢集圓圈的顏色陣列，依資料點數多寡套用不同顏色，預設為 ['#FFA500', '#F1F075', '#F28CB1']。※數量級距請參考下方 INFO 區塊。
    sizes (number[])叢集圓圈的大小陣列，依資料點數多寡套用不同大小，預設為 [20, 30, 40]。※數量級距請參考下方 INFO 區塊。
    opacity (number)叢集圓圈的透明度，範圍為 0 到 1，預設為 0.8。
    strokeColor (string)叢集圓圈外框顏色，預設為 #FFFFFF。
    strokeWidth (number)叢集圓圈外框寬度，預設為 2。
    info

    當值為陣列形式時，會根據資料點數量來套用相應的樣式：

    • 資料點數量為 1-99 個：套用陣列中第一個值。
    • 資料點數量為 100-749 個：套用陣列中第二個值。
    • 資料點數量為 750 個以上：套用陣列中第三個值。

  • text (object)：叢集圓圈文字樣式

    屬性描述
    color (string)叢集圓圈文字顏色，預設為 #FFFFFF。
    size (number)叢集圓圈文字大小，預設為 12。
    font (string[])叢集圓圈文字字體，預設為 ['Noto Sans Regular']。

  • point (object)：叢集點樣式

    屬性描述
    color (string)叢集點的顏色，預設為 #FFA500。
    size (number)叢集點的大小，預設為 6。
    strokeColor (string)叢集點的外框顏色，預設為 #FFFFFF。
    strokeWidth (number)叢集點的外框寬度，預設為 1。

  • nonCluster (object)：非叢集點樣式

    屬性描述
    color (string)非叢集點的顏色，預設為 #008000。
    size (number)非叢集點的大小，預設為 6。
    strokeColor (string)非叢集點的外框顏色，預設為 #FFFFFF。
    strokeWidth (number)非叢集點的外框寬度，預設為 1。

範例

// 啟用叢集功能並設定樣式
map.data.enableCluster(true, {
  styles: {
    // 叢集圓圈樣式
    circle: { 
      colors: ['#45B7D1', '#FF6B6B', '#3498DB'],
      sizes: [15, 25, 35],
      opacity: 0.7,
      strokeColor: '#000000',
      strokeWidth: 3,
    },
    // 叢集文字樣式
    text: { 
      color: '#000000',
      size: 12,
      font: ['Noto Sans Regular']
    },
    // 叢集點樣式
    point: { 
      color: '#45B7D1',
      size: 6,
      strokeColor: '#555555',
      strokeWidth: 1, 
    },
    // 非叢集點樣式
    nonCluster: { 
      color: '#FFFF00',
      size: 4,
      strokeColor: '#555555',
      strokeWidth: 1, 
    }
  }
});

// 新增叢集資料點
for (let i = 0; i < 50; i++) {
  const lng = 121.4 + Math.random() * 0.3;
  const lat = 24.9 + Math.random() * 0.2;
  
  const newFeature = {
    geometry: new mapPlus.Data.Point({
      lng: lng,
      lat: lat,
    }),
    properties: {
      id: `point_${i}`,
      name: `點${i}`,
      addToCLuster: true
    },
  };
  
  map.data.add(newFeature);
}

// 新增非叢集資料點
for (let i = 0; i < 30; i++) {
  const lng = 121.4 + Math.random() * 0.3;
  const lat = 24.9 + Math.random() * 0.2;
  
  const newFeature = {
    geometry: new mapPlus.Data.Point({
      lng: lng,
      lat: lat,
    }),
    properties: {
      id: `non_cluster_${i}`,
      name: `非叢集點${i}`,
      addToCluster: false,
    },
  };
  
  map.data.add(newFeature);
}

控制資料點是否加入叢集​

可在資料點的 properties 中設定 addToCluster 屬性來控制該點是否加入叢集。

  • addToCluster (boolean)：該資料點是否加入叢集，true 為加入成為叢集點之一，false 為不加入（即非叢集點）。當有啟用叢集功能時，預設即為 true。

範例

// 新增叢集點(黃色)
for (let i = 0; i < 30; i++) {
  const lng = 121.4 + Math.random() * 0.3;
  const lat = 24.9 + Math.random() * 0.2;
  
  const newFeature = {
    geometry: new mapPlus.Data.Point({
      lng: lng,
      lat: lat,
    }),
    properties: {
      id: 'cluster_' + i,
      name: '叢集點' + i,
      addToCluster: true, // 加入叢集
    },
  };
  
  map.data.add(newFeature);
}

// 新增非叢集點（綠色）
for (let i = 0; i < 15; i++) {
  const lng = 121.4 + Math.random() * 0.3;
  const lat = 24.9 + Math.random() * 0.2;
  
  const newFeature = {
    geometry: new mapPlus.Data.Point({
      lng: lng,
      lat: lat,
    }),
    properties: {
      id: 'non_cluster_' + i,
      name: '非叢集點' + i,
      addToCluster: false, // 不加入叢集
    },
  };
  
  map.data.add(newFeature);
}

// 啟用叢集功能
map.data.enableCluster(true);