leaflet - 传单 panTo 不居中

Question

我在 map 上有一条轨迹，用户可以通过将鼠标悬停在图表(时间和速度)上来“跟踪”。如果用户放大很多，则部分轨迹可能不可见。当用户想要查看未显示的轨迹部分时，我使用 panTo 方法...

leaflet的panTo方法目前也是居中。我不想居中，我希望 map 移动足够以显示一个点。 (panTo 的问题是它会导致过度的 map 滚动和恶劣的用户体验。)

我尝试过更改边界，但这会产生有时会缩小的(不需要的)副作用。

有什么办法可以做一个“最小”的 panTo 吗？

---

这是一个(有效但未经完善的)解决方案； map 是我们自己的 map 包装实用程序类，lmap 是 typescript 中的传单 map 对象，toxy() 是将纬度/经度转换为 x/y 值的方法。

 if (!this.lmap.getBounds().contains(latlng)) {
    let target = this.map.toxy(latlng);

    let nw = this.map.toxy(this.lmap.getBounds().getNorthWest());
    let se = this.map.toxy(this.lmap.getBounds().getSouthEast());
    let x = 0, y = 0;

    let margin = 75;
    if (target.y < nw.y)
       y = (-1 * (nw.y - target.y)) - margin;
    else if (target.y > se.y)
       y = (target.y - se.y) + margin;

    if (target.x < nw.x)
       x = (-1 * (nw.x - target.x)) - margin;
    else if (target.x > se.x)
       x = (target.x - se.x) + margin;

    this.lmap.panBy(new L.Point(x, y));
 }

Answer 1

首先，使用 map.getPixelBounds() 获取 map 的边界(从 CRS 原点以像素为单位测量) 。然后，使用map.project(latlng, map.getZoom())获取您感兴趣的点的坐标(以 CRS 原点为单位的像素)。

如果您对“来自 CRS 原点的像素”感到困惑，请阅读 http://leafletjs.com/examples/extending/extending-2-layers.html 上的“像素原点”部分。 .

一旦获得这些像素坐标，检查该点是否在视口(viewport)内就应该很简单了，如果不在视口(viewport)内，则检查它在每个方向上的距离有多远。