从 DOM 标记到 WebGL 图层的性能对比
DOM 标记的工作原理与成本
temperature=0.6的设定下，本文聚焦如何提升 Mapbox 大量标记点性能：从逐一使用 DOM 元素的做法转向更高效的图层渲染。对于每个点，使用独立的 HTML 元素作为标记会带来大量的 DOM 结点和事件处理开销，导致浏览器的布局与绘制成本显著上升。
当点的数量达到几百到几千时，每个标记都需要维护事件监听、样式计算与重绘，这在缩放和拖动地图时会产生明显的卡顿，影响交互体验。此时，DOM 渲染的线性复杂度成为瓶颈，而 GPU 的潜力尚未被充分利用。
WebGL 图层的渲染机制与优势
相比于逐点的 DOM 标记，WebGL 图层通过单一数据源在 GPU 上渲染，可以把大量点、圆形或符号绘制成很少的几何体，显著降低 CPU 的工作量。点数据的批量渲染让高密度场景下的缩放和漫游更加平滑。
Mapbox GL JS 的图层系统支持 数据驱动样式、缩放相关属性、以及 declutter/碰撞控制，这些特性在大量标记点场景中能带来稳定的帧率与快速响应。
为什么大量标记点需要统一的图层渲染
单一数据源带来的渲染优势
将大量点放入一个 GeoJSON 数据源，并以一个或少数几个图层来渲染，能显著减少地图的重绘成本。中央化数据源避免了在渲染阶段不断切换不同对象的开销。
这种统一的数据结构使浏览器仅需对一个源的数据进行管控，从而降低图层切换与重绘的复杂度，提升整体渲染效率。
聚簇与分级渲染的意义
在高密度点场景，采用聚簇（cluster）可以把若干点合并成一个簇标记，降低初始渲染对象数量，并在需要更细粒度信息时逐步展开。
Mapbox 的聚簇机制支持在不同缩放层级进行分级渲染，保留聚簇的可读性与单点检视能力，同时避免了逐点渲染带来的性能压力。
实现路线：使用标注聚簇与图层渲染的步骤
准备数据与地理坐标转换
把原始标记数据整理为 GeoJSON 的 Feature 集合，确保经纬度字段正确映射。坐标准确性是后续图层定位与交互的基础。
对于极大规模的数据，可以在服务端做预聚簇或分区，确保前端加载的点数在可控范围内，以便于图层渲染的稳定性。数据准备与分块加载是前端性能优化的前提。
在 Mapbox GL JS 中注册数据源
在地图加载完成后，创建一个 geojson-source，并开启 cluster 模式，以让 Mapbox 自动进行簇计算并渲染。
开启聚簇后，需要把簇点与非簇点分别放在不同的图层上，以实现不同的视觉效果和交互行为。分层结构与参数设置是实现的关键。
添加聚簇层与非聚簇层
常见做法是添加三个图层：一个用于簇的圆形表示、一个显示簇内点数的文本标签、一个用于单独点的圆点表示。分层渲染确保不同缩放下的清晰可读性。
通过数据驱动样式，圆形半径、颜色和文本内容可以绑定到簇的计数，实现自适应显示。数据驱动特性与条件过滤是实现的核心。
交互与缩放行为
点击簇时可以触发平滑放大或跳转到簇的显示区域，提升用户交互体验。事件绑定需要针对簇层与非簇点层分别实现。
缩放过程中的簇重新计算需要保持流畅，避免因频繁重绘导致的卡顿。节流与去抖动策略可以帮助稳定体验。
性能优化要点：数据分片、网格聚簇与分层渲染
数据分页与服务器端聚合
面对海量点时，服务器端聚合或分块传输能显著降低前端数据量，避免一次性加载过多点。
在客户端，可以结合 supercluster 等库进行网格化聚簇，减少前端渲染对象数量，同时保持在缩放过程中的细节可访问性。
合理设置图层与描边、点击区域
为聚簇点与非聚簇点设置不同的绘制半径、颜色和绘制顺序，可以在不同缩放层级上保持良好可读性。绘制数值的合理设定是提升性能的关键。
对于低端设备，减少像素绘制、使用简化纹理和纹理图集，可进一步降低绘制成本并稳定帧率。设备适配与降级策略是实用做法。
数据更新与重绘策略
数据更新时尽量采用增量更新而不是整源替换，减少重绘开销。局部变更优先、批量更新和合理的缓存策略能提升渲染稳定性。
通过对源数据变更的触发条件进行控制，确保地图在交互过程中的重绘次数处于可控范围内。高效的数据管线是性能的基础。
示例代码：将大量标记点改造成图层渲染
初始化地图与数据源
下面的示例展示了如何在 Mapbox GL JS 中把点数据改造成基于图层的渲染结构，开启聚簇并分层显示。聚簇开启、三个图层分别处理簇点和单点。
map.on('load', function () {map.addSource('points', {type: 'geojson',data: '/data/points.geojson',cluster: true,clusterMaxZoom: 14,clusterRadius: 50});// 簇点层map.addLayer({id: 'clusters',type: 'circle',source: 'points',filter: ['has', 'point_count'],paint: {'circle-color': '#51bbd6','circle-radius': ['step',['get', 'point_count'],12,100,20,750,28],'circle-stroke-width': 1,'circle-stroke-color': '#fff'}});// 簇点文本map.addLayer({id: 'cluster-count',type: 'symbol',source: 'points',filter: ['has', 'point_count'],layout: {'text-field': '{point_count_abbreviated}','text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],'text-size': 12}});// 非簇点，单独点显示map.addLayer({id: 'unclustered-point',type: 'circle',source: 'points',filter: ['!', ['has', 'point_count']],paint: {'circle-color': '#11b4da','circle-radius': 4,'circle-stroke-width': 1,'circle-stroke-color': '#fff'}});// 点击簇放大map.on('click', 'clusters', function (e) {var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });var clusterId = features[0].properties.cluster_id;map.getSource('points').getClusterExpansionZoom(clusterId, function (err, zoom) {if (err) return;map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom });});});// 点击非簇点的交互map.on('click', 'unclustered-point', function (e) {// 自定义行为});
});
可选：使用聚簇库进行客户端聚簇
如需在客户端进行自定义聚簇，可以结合 supercluster 库对原始点进行多级聚簇计算，并把结果转化为 Mapbox GL 的数据格式。本地聚簇在数据量极大时具有明显的性能优势。
// 使用 Supercluster 进行聚簇的示例框架
import Supercluster from 'supercluster';const points = [/* 经纬度数组 */];
const index = new Supercluster({radius: 60,maxZoom: 16
});
index.load(points.map(p => ({ type: 'Feature', geometry: { type: 'Point', coordinates: p }, properties: {} })));const clusters = index.getClusters([-180, -85, 180, 85], 2);
console.log(clusters);
