Mapbox Gl JS加载大量标记时地图Resize异常问题求助

核心问题分析 #

当前代码在加载大量标记时，逐个创建DOM按钮并添加Marker，会触发大量同步DOM操作和Mapbox渲染任务，阻塞主线程，导致map.resize()无法及时执行，进而出现地图显示异常。另外还存在重复绑定事件、不必要的同步操作等问题。

具体优化方案 #

1. 用Mapbox的Symbol Layer替代DOM Marker（关键优化） #

DOM Marker在数量超过几百个时性能会急剧下降，改用Mapbox内置的矢量图层（Symbol Layer）渲染标记，完全由WebGL处理，性能提升显著：

map.on('load', () => {
    // 添加矢量数据源
    map.addSource('estate-markers', {
        type: 'geojson',
        data: geojson
    });

    // 添加普通点位图层
    map.addLayer({
        id: 'point-markers',
        type: 'symbol',
        source: 'estate-markers',
        filter: ['!=', 'type', 'habitation'],
        layout: {
            'icon-image': 'custom-point-icon', // 提前通过map.loadImage加载自定义图标
            'icon-size': 0.8
        }
    });

    // 添加带价格的住宅标记图层
    map.addLayer({
        id: 'price-markers',
        type: 'symbol',
        source: 'estate-markers',
        filter: ['==', 'type', 'habitation'],
        layout: {
            'text-field': ['get', 'price'],
            'text-size': 12,
            'text-offset': [0, 0.8],
            'icon-image': 'custom-habitation-icon', // 提前加载图标
            'icon-size': 0.8
        },
        paint: {
            'text-color': '#fff',
            'text-halo-color': '#333',
            'text-halo-width': 1
        }
    });

    // 绑定图层点击事件（替代单个Marker的click）
    map.on('click', ['point-markers', 'price-markers'], (e) => {
        const id = e.features[0].properties.id_estate;
        $.ajax({
            type: "POST",
            url: my_ajax_object.ajaxurl,
            data: {
                action: 'show_modal_map_item',
                id: id,
            }
        }).done(function (response) {
            $('.js-map-card').html(response.data);
            $('.js-map-card-wrapper').removeClass('is-hidden');

            // 移除之前的绑定，避免重复触发
            $(document).off('click', '.js-map-card__close');
            $(document).on('click', '.js-map-card__close', function () {
                $('.js-map-card').empty();
                $('.js-map-card-wrapper').addClass('is-hidden');
            });
        });
    });

    // 导航控件
    map.addControl(new mapboxgl.NavigationControl({ showCompass: false }));

    // 缩放结束事件
    map.on('zoomend', (e) => {
        if (typeof e.originalEvent !== 'undefined') {
            refreshSearchResultOnMapAct(map);
        }
    });

    // 拖拽结束事件
    map.on('dragend', () => {
        refreshSearchResultOnMapAct(map);
    });

    // 计算并调整地图视野边界
    const bounds = geojson.features.reduce((bounds, feature) => {
        return bounds.extend(feature.geometry.coordinates);
    }, new mapboxgl.LngLatBounds(geojson.features[0].geometry.coordinates, geojson.features[0].geometry.coordinates));

    // 视野调整完成后再执行resize
    map.fitBounds(bounds, { padding: 20 }, () => {
        map.resize();
    });
});

2. 优化事件绑定逻辑 #

• 移除循环内的button.addEventListener，改用图层统一点击事件，避免大量重复绑定
• 每次绑定弹窗关闭事件前，先执行off移除旧绑定，防止多次触发

3. 调整resize执行时机 #

把map.resize()放到fitBounds的回调函数中，确保地图视野调整完成后再执行尺寸适配，避免操作冲突。

4. 可选：标记聚合（超大量标记时） #

如果标记数量超过1万，建议添加标记聚合功能，低层级视图自动合并邻近标记：

// 修改数据源为聚合类型
map.addSource('estate-markers', {
    type: 'geojson',
    data: geojson,
    cluster: true,
    clusterMaxZoom: 14, // 超过该层级展开单个标记
    clusterRadius: 50
});

内容的提问来源于stack exchange，提问作者Shojikama