javascript - 使用 Leaflet 检测用户何时达到 maxBounds

Question

我正在使用传单向用户展示交互式 map 。我们想让他们浏览有限的区域，并通知他们必须订阅，以防他们想看到太远的东西(使用弹出窗口或类似的方式)。

到目前为止，我已经看到 Leaflet 支持 maxBounds 选项。这是一个好的开始，可以让我阻止用户看到更大的区域。

现在我希望能够检测 maxBounds“事件”以向用户显示弹出窗口。

我一直在研究Leaflet源代码，但找不到明显的方法来做到这一点。

到目前为止，我发现 maxBounds 选项被输入到 setView 方法中。该方法本身使用_limitCenter方法来定义中心。这会更深入一些，直到最终使用边界的 _getBoundsOffset 方法。

    _getBoundsOffset: function (pxBounds, maxBounds, zoom) {
    var projectedMaxBounds = toBounds(
            this.project(maxBounds.getNorthEast(), zoom),
            this.project(maxBounds.getSouthWest(), zoom)
        ),
        minOffset = projectedMaxBounds.min.subtract(pxBounds.min),
        maxOffset = projectedMaxBounds.max.subtract(pxBounds.max),

        dx = this._rebound(minOffset.x, -maxOffset.x),
        dy = this._rebound(minOffset.y, -maxOffset.y);

    return new Point(dx, dy);
},

到目前为止，我能找到的最接近的方法是 Hook moveend事件并手动检查中心是否超出我的范围。然而，这对于传单已经在做的事情来说似乎是多余的。

是否有更好的利用传单来实现这一目标？

谢谢

Answer 1

只需检查您定义的边界是否包含 map 边界。只要 map 边界在定义的边界内，这将不会执行任何操作:

var myBounds = L.latLngBounds(...)

map.on('move moveend zoomend', function(){
    if (!myBounds.contains(map.getBounds())) {
        // Display popup or whatever
    }
});

it seems like this would be redundant with what leaflet is already doing.

不用担心这个。对于此用例来说，开销可以忽略不计。