mapbox批量添加Marker卡顿

### Mapbox 批量添加 Marker 性能优化方案 在使用 Mapbox 时，批量添加 Marker 可能会导致卡顿问题，尤其是在数据量较大时。以下是针对该问题的性能优化解决方案： #### 1. 使用 `MarkerCluster` 插件 为了减少地图上过多 Marker 的渲染压力，可以使用 MarkerCluster 插件将多个 Marker 聚合为一个集群图标。这种技术能够显著降低渲染复杂度，从而提升性能[^3]。 ```javascript // 示例代码：使用 MarkerCluster 插件 const markerCluster = new mapboxgl.MarkerCluster({ markers: data.markers, // 数据源 clusterRadius: 40, // 集群半径 }); markerCluster.addTo(map); ``` #### 2. 替换为 `GeoJSON` 渲染 相比于逐一添加 Marker，使用 GeoJSON Layer 是一种更高效的渲染方式。通过将所有 Marker 数据整合到一个 GeoJSON 对象中，Mapbox 可以一次性渲染整个图层，从而避免逐个 Marker 的开销[^4]。 ```javascript // 示例代码：使用 GeoJSON 渲染 Marker map.addSource('markers', { type: 'geojson', data: { type: 'FeatureCollection', features: data.markers.map(marker => ({ type: 'Feature', geometry: { type: 'Point', coordinates: [marker.lng, marker.lat] }, properties: marker.properties })) } }); map.addLayer({ id: 'markers-layer', type: 'circle', source: 'markers', paint: { 'circle-radius': 5, 'circle-color': '#007cbf' } }); ``` #### 3. 启用 Canvas 渲染模式 类似于 Leaflet 中的优化策略[^2]，Mapbox 默认使用 SVG 渲染器。当需要处理大量静态 Marker 时，建议切换为 Canvas 渲染模式，以提高渲染效率[^5]。 ```javascript // 示例代码：启用 Canvas 渲染模式 map.setStyle('mapbox://styles/mapbox/streets-v11', { renderWorldCopies: false, fadeDuration: 0 }); map.setPaintProperty('background', 'visibility', 'none'); map.setRenderMode('canvas'); ``` #### 4. 分批加载数据 如果数据量过大，可以考虑分批加载 Marker 数据。通过限制每次加载的 Marker 数量，并结合用户交互（如缩放级别或地理范围）动态加载更多数据，可以有效缓解卡顿问题[^6]。 ```javascript // 示例代码：分批加载数据 function addMarkersInBatches(markers, batchSize) { let index = 0; const intervalId = setInterval(() => { const batch = markers.slice(index, index + batchSize); if (batch.length === 0) { clearInterval(intervalId); return; } batch.forEach(marker => { new mapboxgl.Marker() .setLngLat([marker.lng, marker.lat]) .addTo(map); }); index += batchSize; }, 10); // 每次间隔 10ms 添加一批 } addMarkersInBatches(data.markers, 100); ``` #### 5. 减少不必要的属性和样式 复杂的 Marker 样式和属性会增加渲染负担。可以通过简化 Marker 的外观设计（如统一颜色、形状等）来减少计算量[^7]。 --- ### 总结 通过上述方法，包括使用 MarkerCluster 插件、GeoJSON 渲染、Canvas 模式、分批加载以及优化 Marker 样式，可以有效解决 Mapbox 批量添加 Marker 时的卡顿问题。