Mapbox GL 中的 MaxBounds 和自定义非对称填充

我有一个 Mapbox GL JS 应用程序，在地图上显示一些小部件。为了确保地图上的任何内容都不会被它们隐藏，我使用以下命令添加了一些填充map.setPadding()。这是一个不对称的（在我的例子中左边比右边大）。它按预期工作，例如fitBounds和动画，但我还需要设置maxBounds以便用户不会平移到所需的视口之外。不幸的是，这不适用于自定义填充。当我划定界限并使用showPadding我可以看到这些线不会对齐。我对填充之间的差异越大，问题就越大。

我想知道是否有人遇到类似的问题或者可以引导我找到一个解决方案，在该解决方案中我可以将地图限制在某些范围内，同时仍然能够使用如上所述的自定义填充。

这是该问题的一个示例：https://jsfiddle.net/1ysrgkcL/45/ https://jsfiddle.net/1ysrgkcL/45/请注意粗黑色矩形如何与填充线对齐。

我之前遇到了同样的问题，我使用以下方法修复它：

• 拟合边界因为它将填充量（以像素为单位）添加到给定的边界。
• 请求动画帧：在其回调中，我收到了 getBounds 并将其设置为最大边界（技巧）

更新的代码片段：

<script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiYnBhY2h1Y2EiLCJhIjoiY2lxbGNwaXdmMDAweGZxbmg5OGx2YWo5aSJ9.zda7KLJF3TH84UU6OhW16w';

        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [-73.9774108244587, 40.820698485268366],
            zoom: 11.6
        });

        map.on('load', function () {
            const padding = { left: 300, right: 100, top: 100, bottom: 30 }; //<--- padding

            const bounds = {
                "n": 40.896790957065434,
                "s": 40.76021859203365,
                "e": -73.85756962495667,
                "w": -74.09102645202957
            }
            const maxBounds = [[bounds.w, bounds.s], [bounds.e, bounds.n]];

            //<---- notice here--->
            map.fitBounds(maxBounds, {
                padding, //<--- used here
                linear: true,
                duration: 0
            });

            map.showPadding = true

            //<---- notice here--->
            requestAnimationFrame(() => {
                const getBoundsFromViewport = map.getBounds();
                map.setMaxBounds(getBoundsFromViewport);
            });

            const boundsRect = [
                [bounds.e, bounds.n],
                [bounds.w, bounds.n],
                [bounds.w, bounds.s],
                [bounds.e, bounds.s],
                [bounds.e, bounds.n]
            ]

            map.on('click', (e) => console.log('##', e.lngLat.toArray()))

            map.addLayer({
                'id': 'bounds',
                'type': 'line',
                'source': {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': boundsRect
                        }
                    }
                },
                'paint': {
                    'line-color': '#000000',
                    'line-width': 10
                },
                'layout': {}
            });
        });
    </script>

And it will like charm in your case too. Attaching screenshot:

试一试！