MapboxClusterLayer

点聚合图层，基于 geojson cluster 自动渲染聚合圆、计数与散点三层，点击聚合圆展开。

简介

MapboxClusterLayer 把大量点数据自动聚合：内部用开启 cluster 的 geojson 源渲染「聚合圆 + 计数文字 + 散点」三层。点击聚合圆默认放大到展开级别（autoExpand），并派发 clusterClick / pointClick 事件。

用法

传入点数据即自动聚合，点击聚合圆展开：

<script setup lang="ts">
import type { FeatureCollection } from 'geojson'

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 150 }, (_, i) => ({
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'Point',
      coordinates: [116.0 + ((i * 37) % 100) / 125, 39.7 + ((i * 53) % 100) / 167]
    }
  }))
}
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.4, 39.9], zoom: 9 }"
    >
      <!-- 自动聚合：点击聚合圆放大展开，散点单独渲染 -->
      <MapboxClusterLayer :data="data" />
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`data`		`string \| GeoJSON.Point \| GeoJSON.MultiPoint \| GeoJSON.LineString \| GeoJSON.MultiLineString \| GeoJSON.Polygon \| GeoJSON.MultiPolygon \| GeoJSON.GeometryCollection<GeoJSON.Geometry> \| GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }> \| GeoJSON.FeatureCollection<GeoJSON.Geometry, { [name: string]: any; }>` 点要素数据（GeoJSON 或其 URL）
`sourceId`		`string` source 与图层 id 前缀；省略时自动生成
`clusterRadius`	`50`	`number` 聚合半径（像素）
`clusterMaxZoom`	`14`	`number` 超过该缩放级别不再聚合
`clusterPaint`		`PropBag` 覆盖聚合圆 paint
`countLayout`		`PropBag` 覆盖计数文字 layout
`countPaint`		`PropBag` 覆盖计数文字 paint
`pointPaint`		`PropBag` 覆盖散点 paint
`beforeId`		`string` 插入到该图层之前
`autoExpand`	`true`	`boolean` 点击聚合圆自动放大到展开级别

Emits

Event	Type
`clusterClick`	`[payload: { clusterId: number; coordinates: [number, number]; expansionZoom: number; }]`
`pointClick`	`[feature: mapboxgl.GeoJSONFeature]`

Changelog

No recent changes

heatmap

用 MapboxLayer 的 heatmap 类型把点密度渲染为热力图，paint 控制半径与强度。

MapboxBuildingLayer

3D 建筑图层，挤出官方样式的 composite/building 矢量源，可调颜色、透明度与起始缩放。