Mapbox GL中的MaxBounds和自定义非对称填充 [英] MaxBounds and custom asymmetric padding in Mapbox GL

问题描述

我有一个Mapbox GL JS应用，在地图上我显示了一些小部件.为了确保地图上没有任何东西被它们隐藏，我使用 map.setPadding()添加了一些填充.它是不对称的(在我的情况下，左大于右).它可以像 fitBounds 和动画之类的东西正常工作，但是我还需要设置地图的 maxBounds ，这样用户才不会平移出所需的视口.不幸的是，这不适用于自定义填充.当我绘制边界并使用 showPadding 时，我可以看到这些线不会对齐.当我在填充之间进行区别时，问题就越大.

我想知道是否有人遇到类似的问题，或者是否可以将我引向一个解决方案，使我可以将地图固定在一定范围内，同时仍然能够像上面所述使用自定义填充.

以下是问题的一个示例:

试试看！

I have a Mapbox GL JS app, where over a map I display some widgets. To make sure nothing on the map will be hidden by them I've added some padding using map.setPadding(). It's an asymmetric one (left is larger than right in my case). It works as intended for things like fitBounds and animation but I also need to set up maxBounds of the map so the user won't pan out of the desired viewport. Unfortunately that doesn't work well with custom padding. When I draw the bounds and use showPadding I can see that those lines won't align. The problem grows bigger the bigger I make the difference between the paddings.

I was wondering if anybody had similar issues or can lead me to a solution where I can have map clamped to some bounds while still being able to use custom padding like I described above.

Here's an example of the issue: https://jsfiddle.net/1ysrgkcL/45/ Notice how the thick black rectangle doesn't align with the padding lines.

解决方案

I ran into same problem earlier and i fix it using:

• fitBounds as it add's the amount of padding(in pixels) to the given bounds.
• requestAnimationFrame: In its callback i received the getBounds and set it as max bounds(trick)

Updated code snippet:

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

Give it a try!

这篇关于Mapbox GL中的MaxBounds和自定义非对称填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！