Question

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

2020-09-28

2261

javascript mapbox mapbox-gl-js

我有一个 Mapbox GL JS 应用，我在地图上显示一些小部件。为了确保地图上的任何内容都不会被它们隐藏，我使用 map.setPadding() 添加了一些填充。它是不对称的（在我的情况下，左边大于右边）。它按预期适用于 fitBounds 和动画等，但我还需要设置地图的 maxBounds ，以便用户不会超出所需的视口。不幸的是，这不适用于自定义填充。当我绘制边界并使用 showPadding 时，我可以看到那些线条不会对齐。我对填充之间的差异越大，问题就越大。

我想知道是否有人遇到过类似的问题，或者可以为我提供解决方案，让我可以将地图限制在某些范围内，同时仍然能够使用上面描述的自定义填充。

以下是该问题的一个例子： https://jsfiddle.net/1ysrgkcL/45/ 请注意，粗黑色矩形与填充线不对齐。

Answer 1

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

fitBounds ，因为它会将填充量（以像素为单位）添加到给定的边界。
requestAnimationFrame ：在其回调中，我收到了 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>

它也会像你的情况一样有魅力。附加屏幕截图：

试试看！