Preview Updated 2026-05-10

MarkerCluster 标记聚合

网格聚合算法把密集标记合并成可点击的数字气泡，缓解视觉拥挤。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

按 cellSize（像素粒度）切网格、把同格内的点聚合成一个数字气泡；少于 minClusterSize 的网格保持原始 dot。点击气泡能拿回 ClusterGroup，里面有 members 数组，你可以拿去做”展开 / 缩放进去”的下钻动作。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfMarkerCluster } from '@chufix-design/maps-vue';

// Random markers across China.
const data = Array.from({ length: 300 }, (_, i) => ({
  id: i,
  name: `点位 ${i}`,
  lng: 80 + Math.random() * 50,
  lat: 18 + Math.random() * 32,
}));

function onClusterClick(c: { count: number }) {
  console.log('cluster', c.count);
}
</script>
<template>
  <CfMapTile
    :center="{ lng: 105, lat: 35 }"
    :zoom="3"
    :width="720"
    :height="520"
  >
    <CfMarkerCluster
      :data="data"
      :cellSize="60"
      @clusterClick="onClusterClick"
    />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfMarkerCluster } from '@chufix-design/maps-vue';

// Random markers across China.
const data = Array.from({ length: 300 }, (_, i) => ({
  id: i,
  name: `点位 ${i}`,
  lng: 80 + Math.random() * 50,
  lat: 18 + Math.random() * 32,
}));

function onClusterClick(c: { count: number }) {
  console.log('cluster', c.count);
}
</script>
<template>
  <CfMapTile
    :center="{ lng: 105, lat: 35 }"
    :zoom="3"
    :width="720"
    :height="520"
  >
    <CfMarkerCluster
      :data="data"
      :cellSize="60"
      @clusterClick="onClusterClick"
    />
  </CfMapTile>
</template>

import { CfMapTile, CfMarkerCluster } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfMarkerCluster } from '@chufix-design/maps-vue';

  // Random markers across China.
  const data = Array.from({ length: 300 }, (_, i) => ({
    id: i,
    name: `点位 ${i}`,
    lng: 80 + Math.random() * 50,
    lat: 18 + Math.random() * 32,
  }));

  function onClusterClick(c: { count: number }) {
    console.log('cluster', c.count);
  }
  return (
    <>
      <CfMapTile center={{ lng: 105, lat: 35 }} zoom={3} width={720} height={520} >
          <CfMarkerCluster data={data} cellSize={60} onClusterClick={onClusterClick} />
        </CfMapTile>
    </>
  );
}

import { CfMapTile, CfMarkerCluster } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfMarkerCluster } from '@chufix-design/maps-vue';

  // Random markers across China.
  const data = Array.from({ length: 300 }, (_, i) => ({
    id: i,
    name: `点位 ${i}`,
    lng: 80 + Math.random() * 50,
    lat: 18 + Math.random() * 32,
  }));

  function onClusterClick(c: { count: number }) {
    console.log('cluster', c.count);
  }
  return (
    <>
      <CfMapTile center={{ lng: 105, lat: 35 }} zoom={3} width={720} height={520} >
          <CfMarkerCluster data={data} cellSize={60} onClusterClick={onClusterClick} />
        </CfMapTile>
    </>
  );
}

工具函数

gridCluster(data, project, cellSize, minClusterSize) 与 clusterRadius(count) 均直接 export，可在组件外复用做自定义渲染。

API

属性	类型	默认	说明
`data`	`MarkerDatum[]`	—	`{ id, lng, lat, name?, weight?, data? }`
`geojson`	`FeatureCollection`	—	独立使用时的底图
`extent` / `projection`	—	自动	见 BubbleMap
`cellSize`	`number`	`60`	聚合网格尺寸 (px)
`minClusterSize`	`number`	`2`	少于此数不聚合
`clustersOnly`	`boolean`	`false`	只画聚合气泡，不画单点
`@clusterClick` / `onClusterClick`	`(c: ClusterGroup) => void`	—	气泡点击
`@markerClick` / `onMarkerClick`	`(m) => void`	—	单点点击