Question

这就是我正在做的事情： 单击地图上的标记以打开侧面板并将地图居中放置标记。侧面板占据屏幕右侧的3/4。

这就是我需要发生的事情： 根据面板打开后留下的视口的1/4使标记居中。

我可以获取标记的像素坐标，并在面板动画打开时计算它需要转换到的位置。问题是flyTo()只接受LngLatLike个对象，我无法将我的像素坐标转换为纬度和经度。 Leaflet.js有一个名为containerPointToLatLng()的函数，在我切换到Mapbox GL之前派上用场。

鉴于Mapbox GL的软化，尽管它有新意，我只能想象这是一种可能性。 但是如何？

Answer 1

project和unproject方法可以实现这样的逻辑。如果您在某个lngLat上单击，并且想要定位地图以使该地理位置水平居中且位于1/8标记处，您可以：

获取地理位置并将其转换为project
将该像素位置右移（1 / 2-1 / 8）= 4 / 8-1 / 8 = 3/8 = 0.375 * map._containerDimensions()[0]，将该数字添加到其中
将移位的像素位置移回unproject

或者，您也可以使用flyTo来电中的offset option轻松完成此操作。

Answer 2

我处于类似的情况，只有我的侧面导航菜单是400px（相同的主体）。我遇到了两个相同的障碍：

计算flyto函数从像素到lat / lng的校正
校正不同的缩放级别

@tmcw答案在第一个方面做得非常出色，但是很遗憾，offset option in flyto function不再可用。

计算得出，为了获得不同缩放级别之间的线性比，您需要根据docs划分2 ^zoom1：2 ^zoom2。

完整示例：

// Desired zoom level at the end of flyTo
const zoomLevel = 16;
const zoomCorrection = Math.pow(2, this.map.getZoom()) / Math.pow(2, zoomLevel);

// Desired left shift/offset in px at the end of the flyTo. Use minus for right shift.
const leftShift = 200;


const lat = SelectedMarker.longitude;
const lng = SelectedMarker.latitude;
const coordinates = this.map.project([lat, lng]);
const offsetcoordinates = this.map.unproject([coordinates.x + (leftShift * zoomCorrection), coordinates.y]);

this.map.flyTo({
  animate: true,
  zoom: zoomLevel,
  center: [offsetcoordinates.lng, offsetcoordinates.lat],
});

Answer 3

即使这是一个老问题，对于所有有相同要求的人（像我一样），我在 mapbox 站点中找到了一个 official example

将坐标转换为屏幕上的像素（然后再返回）

3 个答案: