传单 - Fitbounds 并保持居中

Posted 2023-02-23

【中文标题】传单 - Fitbounds 并保持居中

【英文标题】：Leaflet - Fitbounds and keep center

【发布时间】：2016-10-29 06:46:25

【问题描述】：

我正在使用带有 Mapbox 的 Leaflet，我想设置地图的视图：

所有标记都可见 中心设置为特定点

使用 setView 和 fitbounds 分别处理每个点很容易，但我不知道如何同时拥有这两个点，因为 setView 更改了边界，而 fitBounds 更改了中心。一个解决方案可能是定义一个中心和一个缩放，但我怎么知道哪个缩放可以让我的所有标记都可见？

编辑

我实施了 IvanSanchez 建议的解决方案，它按预期工作：

let ne=leafletBounds.getNorthEast();
let sw=leafletBounds.getSouthWest();
let neSymetric=[ne.lat + (center.lat - ne.lat)*2, ne.lng + (center.lng - ne.lng)*2];
let swSymetric=[sw.lat +(center.lat - sw.lat)*2, sw.lng + (center.lng - sw.lng)*2];
leafletBounds.extend(L.latLngBounds(swSymetric, neSymetric));

【参考方案1】：

我找到了另一个解决方案。使用 fitBound() 调整地图后，您可以简单地调用 map.panTo([lat, lng])。我正在使用 VueJs 并在 mount() 生命周期挂钩中调用它。

我正在拟合边界，因此您可以看到用户的位置以及远处的地理特征，但是我使用 panTo，因此用户的真实位置在 fitBounds 之后位于地图的中心。到目前为止，它似乎可以无缝运行。

【参考方案2】：

获取边界，并通过沿所需中心点应用点对称来创建第二个 L.Bounds 实例。创建一个包含原始边界和对称边界的新 L.Bounds。运行fitBounds()。

【讨论】：

谢谢，这是一个简单有效的解决方案！