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

Question

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

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

我可以获得标记的像素坐标，并计算在面板动画打开时它需要转换到的位置。问题是 flyTo() only accepts LngLatLike objects and I cannot convert my pixel coordinates to latitude and longitude. Leaflet.js has a function called containerPointToLatLng() 在我切换到 Mapbox GL 之前派上用场了。

考虑到 Mapbox GL 的复杂性，尽管它很新，我只能想象这是一种可能性。 但是如何呢？

Answer 1

project and 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.

完整示例：

// 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

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

Convert coordinates to pixels on screen (and back again)

mapbox

mapbox-gl

mapbox-gl-js

mapbox-marker