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

Question

这就是我正在做的事情: 点击地图上的标记打开侧面板并将地图置于标记的中心.侧面板占据屏幕右侧的3/4.

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

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

鉴于Mapbox GL的软化,尽管它有新意,我只能想象这是一种可能性.但是怎么样？

Answer 1

该项目和unproject方法使大量的逻辑这样的可能.如果您点击某个lngLat,并且想要定位地图以使该地理位置水平居中并且位于1/8标记处,您可以:

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

或者,您也可以通过在通话中使用偏移选项轻松实现flyTo.