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

我有一个Mapbox GL JS应用程序，在地图上我可以显示一些小部件。为了确保它们不会隐藏地图上的任何内容，我使用

map.setPadding（）

添加了一些填充。它是不对称的（在我的例子中，左边比右边大）。它适用于

fitBounds

和动画，但我还需要设置地图的

maxBounds

，这样用户就不会平移出所需的视口。不幸的是，这不适合自定义填充。当我绘制边界并使用

showPadding

时，我可以看到这些线不会对齐。问题越大，我对填充物的区别就越大

我想知道是否有人有类似的问题，或者可以引导我找到一个解决方案，在这个解决方案中，我可以将映射钳制到某个边界，同时仍然能够使用自定义填充，就像我上面描述的那样

---

下面是一个问题示例：请注意，黑色粗矩形与填充线不对齐。

我之前遇到过相同的问题，我使用以下方法解决了此问题：

• fitBounds当它将填充量（以像素为单位）添加到给定的边界时
• requestAnimationFrame：在其回调中，我收到了getBounds并将其设置为max bounds（技巧）

更新的代码段：

<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>

mapboxgl.accessToken='pk.eyj1ijoiynbhy2h1y2eilcjhijoi2lxbgnwaxdmdawegzbmg5ogx2ywo5asj9.zda7kljf3th84uuuu6ohw16w'；
常量映射=新的mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-73.9774108244587，40.820698485268366]，
缩放：11.6
});
map.on（'load'，function（）{
常量填充={left:300，right:100，top:100，bottom:30}；//console.log（'##'，e.lngLat.toArray（））
map.addLayer({
'id'：'bounds'，
“类型”：“行”，
“来源”：{
'type'：'geojson'，
“数据”：{
“类型”：“特征”，
“几何学”：{
'type'：'LineString'，
“坐标”：boundsRect
}
}
},
“油漆”：{
“线条颜色”：“000000”，
“线宽”：10
},
“布局”：{}
});
});

你的情况也会很有魅力。附加屏幕截图：

---

试试看

用一个具体的例子和代码来回答这个问题会更容易，最好是用代码笔或类似的工具。@SteveBennett嗯，我有一位同事读过这个证明，我们认为这足以理解这个问题，但也许举个例子也不错。我用一个例子更新了这个问题。没有代码，如果某人碰巧已经知道答案，就像他们以前看到的那样，他可以回答。有了代码，如果有人知道如何调试和诊断问题，并且愿意，他们可以回答。谢谢回复！的确，它看起来更好，但是您忘记调用

map.setPadding（{left:300，right:100，top:50，bottom:30}）

。通过这种方式，可以全局设置填充，以便以后的一切（所有动画等）都将考虑填充。这是否意味着我必须自己管理填充物？因为添加了该行之后，体验仍然中断。不需要

map.setPadding

。fitBounds方法中使用了padding选项，并再次更新了代码段。好的，没关系。最初的渲染效果确实更好。但是在初始化之后，如果我做了一个像map.flyTo这样的动画，我必须在那里传递相同的填充，这样它才能正确地居中，对吗？为了避免这样做，我认为设置全局填充就可以了。