mapbox - 在 MapBox 中为 map 区域添加填充

Question

如何向 map 区域添加填充？

正如您在屏幕截图中看到的那样，有一个黄色 div覆盖在顶部并且弹出窗口出现在其下方，因此我想将 map 区域 100px 填充到顶部，以便弹出窗口下降到一边。提前致谢。



下面的代码:

        <div id="map" class="map"></div>
            <script>
                mapboxgl.accessToken = 'pk.xxxxxx';
                var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/xxxxxx/cj5jggnud0m5g2soxqalq8z3n',
                zoom: 3,
                center: [50.075,26.136]
                });

                var geojson = {
                  type: 'FeatureCollection',
                  features: [


                  {
                    type: 'Feature',
                    geometry: {
                      type: 'Point',
                      coordinates: xx.xxxxx,xx.xxxxxx }}]
                    },
                    properties: {
                      title: 'Egypt',
                      description: 'Item One Item Two Item Three'
                    }
                  }

                 ]
                };

                // add markers to map
                geojson.features.forEach(function(marker) {

                    // create a HTML element for each feature
                    var el = document.createElement('div');
                    el.className = 'marker';

                    // make a marker for each feature and add to the map
                    new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
                    .setLngLat(marker.geometry.coordinates)
                    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                    .setHTML('<div class="map-marker"><h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p></div>'))
                    .addTo(map);
                });

                // disable map zoom when using scroll
                map.scrollZoom.disable();
                // Add zoom and rotation controls to the map.
                var nav = new mapboxgl.NavigationControl();
                map.addControl(nav, 'bottom-right');

            </script>

Answer 1

这是一个很老的问题，但也许这有助于谷歌搜索。
最简单的解决方案归结为将 map 的中心向下移动 100 像素。由于 map 的中心是 lnglat 格式，您首先必须将其转换为 px 值，添加 100px，然后再转换回 lnglat。您可以使用 project和 unproject map 上的方法目的。 project将 lnglat 转换为 px，unproject反之亦然:

const [x, y] = project(map.getCenter())
map.setCenter(unproject([x, y + 100]))

当您有可拖动的 map 时，此解决方案很有用。如果您有 BoundingLngLat，它可能不是您想要的。包含一堆您都希望在视口(viewport)中可见的功能。由于您从 map 底部损失了 100 像素，因此要素可能最终会出现在视口(viewport)之外。在这种情况下，您可以移动 LngLatBounds 的东北 lnglat 100px 向上，使用相同的机制:

const [x, y] = project(bounds.getNorthEast())
bounds.setNorthEast(unproject([x, y - 100]))
map.fitBounds(bounds)