介紹

專門支援資料與渲染器的動態更新，調用 new mapPlus.DynamicCluster(options)，開始使用動態叢集圖。

DynamicCluster 是一個專為動態更新資料與渲染器而設計的 API。

其核心邏輯以每個渲染器對應的唯一識別符 key 作為更新的基準點，從而精準檢測新舊資料的差異，並僅對變更部分進行處理，而非重新渲染所有資料，以提升叢集圖的性能。

開始使用

調用 new mapPlus.DynamicCluster(options)，開始使用地圖動態叢集。

  • options (object): 必填，動態叢集的參數。

    參數描述
    options.data object[]選填，動態叢集的資料，可搭配 options.markerRenderer 進行使用。
    options.markerRenderer function選填，渲染地標的回調函式，回調函式中需回傳 地標參數 與不重複 key 值。未填則使用 options.data 中的資料。`
    options.styles object選填，叢集圖的樣式。
    options.onClusterClick function選填，點選叢集圖執行的回調函式，預設為畫面移至該座標叢集區域。
    options.onMarkerClick function選填，點選地標執行的回調函式。
    options.clusterMaxZoom number選填，集群圖層會停止集群化的最大縮放級別，預設為 14。
    options.clusterMinPoints number選填，形成一個集群所需的最小點數，預設為 2。
    options.clusterRadius number選填，集群半徑，以像素為單位，預設為 50。

範例

js
// 資料const data = [  { id: 'a', position: [121.52012916930945, 25.029326932236182] },  { id: 'b', position: [121.52412916930945, 25.026326932236182] },  { id: 'c', position: [121.52612916930945, 25.027326932236182] },  { id: 'd', position: [121.52812916930945, 25.025326932236182] },  { id: 'e', position: [121.53012916930945, 25.022326932236182] },];
// 地標渲染器function markerRenderer({ id, position }) {  return {    key: id,    position,  }}
// 新增動態叢集new mapPlus.DynamicCluster({  data,  markerRenderer,});

地標渲染器

可使用 DynamicCluster(options) 的 options.data 與 options.markerRenderer 來設定地標的渲染。

markerRenderer

options.markerRenderer(callback)

markerRenderer 接受一個 callback 回調函式，該回調函式需返回包含 地標參數 以及唯一的 key 值的物件。

callback(data, index) 參數說明：

  • data (any)：為 options.data 中的資料。
  • index (number)：資料的索引。

範例

js
// 資料const data = [  { id: 'a', color: '#FF0000', radius: 30, position: [121.52012916930945, 25.029326932236182] },  { id: 'b', color: '#00FF00', radius: 40, position: [121.52412916930945, 25.026326932236182] },  { id: 'c', color: '#0000FF', radius: 30, position: [121.52612916930945, 25.027326932236182] },  { id: 'd', color: '#FF0000', radius: 40, position: [121.52812916930945, 25.025326932236182] },  { id: 'e', color: '#00FF00', radius: 50, position: [121.53012916930945, 25.022326932236182] },];
// 地標渲染器function markerRenderer({ id, color, radius, position }, index) {  const icon = document.createElement('div');  icon.style.width = `${radius}px`;  icon.style.height = `${radius}px`;  icon.style.backgroundColor = color;  return {    key: id,    icon,    position,  }}
// 新增動態叢集new mapPlus.DynamicCluster({  data,  markerRenderer,});

叢集圖樣式

可使用 DynamicCluster(options) 的 options.styles 來設定叢集圖的樣式。

範例

js
// 樣式const styles = {  default: {    radius: 25,    fillColor: '#98FB98',    fillOpacity: .6,    strokeColor: '#98FB98',    strokeOpacity: 1,    strokeWidth: 3,    textColor: '#000000',    textSize: 12,  },  4: {    radius: 30,    fillColor: '#FFD700',    strokeColor: '#FFD700',  },  5: {    radius: 35,    fillColor: '#FF6347',    strokeColor: '#FF6347',  }}
// 新增動態叢集new mapPlus.DynamicCluster({  data,  styles,  markerRenderer,});

叢集圖點選事件

可使用 DynamicCluster(options) 的 options.onClusterClick ，設定點選叢集圖執行的回調函式，預設為畫面移至該座標叢集區域。

範例

js
// 叢集圖點選function onClusterClick({ properties }) {  const { point_count } = properties;  if (point_count === undefined ) {    alert('一共有1個地標在這裡！');  } else {    alert('一共有' + point_count + '個地標在這裡！');  }}
// 新增動態叢集new mapPlus.DynamicCluster({  data,  markerRenderer,  onClusterClick,});

地標點選事件

可使用 DynamicCluster(options) 的 options.onMarkerClick ，設定點選地標執行的回調函式。

範例

js
// 資料const data = [  { id: 'a', position: [121.52012916930945, 25.029326932236182] },  { id: 'b', position: [121.52412916930945, 25.026326932236182] },  { id: 'c', position: [121.52612916930945, 25.027326932236182] },  { id: 'd', position: [121.52812916930945, 25.025326932236182] },  { id: 'e', position: [121.53012916930945, 25.022326932236182] },];
// 地標渲染器function markerRenderer({ id, position }) {  return {    key: id,    name: `marker ${id}`,    position,  }}
// 地標點選function onMarkerClick({ event , marker , options }) {  const infoWindow = new mapPlus.InfoWindow({    content: `This is "${options.name}"`,  });  infoWindow.open({ anchor: marker });}
// 新增動態叢集new mapPlus.DynamicCluster({  data,  markerRenderer,  onMarkerClick,});