Skip to main content

實例方法

實例方法描述
enableCluster是否啟用叢集功能。
toggleClusterPoints顯示或隱藏所有叢集點。
toggleNonClusterPoints顯示或隱藏所有非叢集點。

enableCluster​

map.data.enableCluster(enabled, options)

是否啟用叢集功能。

  • enabled (boolean)：必填，是否啟用叢集功能。

  • options (object)：選填，叢集圖的參數。

    參數描述
    options.radius number選填，叢集半徑，以像素為單位，預設為 50。
    options.maxZoom number選填，叢集圖層會停止叢集化的最大縮放級別，預設為 14。
    options.styles object選填，叢集圖的樣式設置。

範例

<script type="module">
// 啟用叢集功能
map.data.enableCluster(true, {
  radius: 70,
  maxZoom: 12,
  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, 
    }
  }
});
</script>

toggleClusterPoints​

map.data.toggleClusterPoints(visible)

顯示或隱藏所有叢集點。

  • visible (boolean)：必填，是否顯示叢集點，true 為顯示，false 為隱藏。

範例

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

map.on('load', () => {
  // 隱藏叢集點
  map.data.toggleClusterPoints(false);

  setInterval(() => {
    // 三秒後顯示叢集點
    map.data.toggleClusterPoints(true);
  }, 3000)
})

toggleNonClusterPoints​

map.data.toggleNonClusterPoints(visible)

顯示或隱藏所有非叢集點。

  • visible (boolean)：必填，是否顯示非叢集點，true 為顯示，false 為隱藏。

範例

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

map.on('load', () => {
  // 隱藏非叢集點
  map.data.toggleNonClusterPoints(false);
  
  setInterval(() => {
    // 三秒後顯示非叢集點
    map.data.toggleNonClusterPoints(true);
  }, 3000)
})