Skip to main content

介紹

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。

範例

// 資料
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)：資料的索引。

範例

// 資料
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 來設定叢集圖的樣式。

範例

// 樣式
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 ，設定點選叢集圖執行的回調函式，預設為畫面移至該座標叢集區域。

範例

// 叢集圖點選
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 ，設定點選地標執行的回調函式。

範例

// 資料
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,
});