Mapbox GL JS：在不同缩放级别下更改弹出窗口偏移量

Question

根据我的Mapbox地图当前的缩放级别，标记图标的大小会有所不同。所有自定义标记都在一个div容器中，并且我更改类来更改它们的大小。

现在我遇到了这样的问题：如果图标较小，则弹出窗口（弹出窗口与标记图标之间的距离）的偏移量太大。

是否有可能随着缩放级别改变弹出窗口的偏移量？

- highliner

Answer 1

在我的情况下，没有根据缩放级别应用CSS类。我所做的是从缩放级别的侦听器中强制使用自定义类。类似于以下内容：

this.map.on('zoom', () => {
    if (this.map.getZoom() > 8) {
        // zooming in, remove offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (popup.classList.contains("my-offset-class")) {
                popup.classList.remove("my-offset-class");
            }
        }
    } else {
        // zooming out, add left offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (!popup.classList.contains("my-offset-class")) {
                popup.classList.add("my-offset-class");
            }
        }
    }
});

这里 mapboxgl-popup 是弹出框的标准 CSS 类（您可以使用任何自定义类，只要将其应用于您的弹出框），而 my-offset-class 是应用偏移量的 CSS 类。

- mdt

Answer 2

有时候解决方案比预期的要简单。Mapbox弹出窗口已经根据弹出位置到标记（例如右下角）拥有一个类。再加上我额外使用的缩放类，我可以轻松地通过CSS更改偏移值。这里是一个例子。

.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-left,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-right
{
    top: 10px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-left {
    top: 6px;
    left: -4px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-right {
    top: 6px;
    left: 2px;
}

- highliner