Mapbox GL JS 3.2保存恢复相机位置偏移问题求助

方法1：标签页切换resize后重新校正视图 #

既然移除resize会导致地图适配失效，但resize会打乱已恢复的视图，那就在resize完成后，直接重新应用保存的视图参数。修改标签页的shown.bs.tab事件逻辑：

document.getElementById('threed-ski-map-tab').addEventListener('shown.bs.tab', function () {
    setTimeout(() => {
        snowedMapbox.resize();
        // 用jumpTo直接校正位置，避免动画重复
        snowedMapbox.jumpTo({
            center:     [mapbox_lon, mapbox_lat], 
            zoom:       mapbox_zoom, 
            pitch:      mapbox_pitch,
            bearing:    mapbox_bearing
        });
    }, 200);
});

方法2：全局监听resize事件自动校正 #

如果地图还可能因窗口缩放等场景触发resize，可以全局监听地图的resize事件，只要有保存的视图参数就自动修正：

// 先把保存的视图参数存到全局状态
let savedMapView = {
    center:     [mapbox_lon, mapbox_lat], 
    zoom:       mapbox_zoom, 
    pitch:      mapbox_pitch,
    bearing:    mapbox_bearing
};

// 监听地图resize事件
snowedMapbox.on('resize', () => {
    snowedMapbox.jumpTo(savedMapView);
});

// 保留标签页切换的resize逻辑
document.getElementById('threed-ski-map-tab').addEventListener('shown.bs.tab', function () {
    setTimeout(() => {
        snowedMapbox.resize();
    }, 200);
});

方法3：优化保存参数的时机（可选） #

如果用户可能在非地图标签页点击保存按钮，此时地图容器尺寸异常，获取的参数本身就有问题。可以在保存前先切换到地图标签页并完成resize：

$('#setNewViewMapbox').click(function () {
    // 强制切换到地图标签页
    const mapTab = new bootstrap.Tab(document.getElementById('threed-ski-map-tab'));
    mapTab.show();
    
    setTimeout(() => {
        snowedMapbox.resize();
        // 此时再获取正确的相机参数
        const zoom      = snowedMapbox.getZoom();
        const pitch     = snowedMapbox.getPitch();
        const bearing   = snowedMapbox.getBearing();
        const center    = snowedMapbox.getCenter();
        const latitude  = center.lat;
        const longitude = center.lng;

        // 后续AJAX保存逻辑不变
        $.ajax({
            url:  thisUrl+'/snowedWeatherUpdateMapboxView',
            type: 'POST',
            data: {
                snowedWeather_id:  snowedWeather_id,
                bearing:            bearing,
                pitch:              pitch,
                zoom:               zoom,
                latitude:           latitude,
                longitude:          longitude,
                [tokenName]:        tokenValue 
            },
            // ... 原success/error回调
        });
    }, 300);
});

原理说明 #

Mapbox的相机参数是基于当前地图容器尺寸计算的。当地图在隐藏标签页时，容器尺寸异常，resize操作会重新计算视口投影，导致之前设置的中心位置在新视口中出现偏移。通过在resize后重新应用视图参数，就能修正这个偏移问题。

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