将 Point（或 PointLike）转换为 LngLat 对象

Question

我有一个mapbox地图，我想添加一个固定的标记。 “固定”是指 absolute 中的某些东西，因此固定了地图 div 容器的方面。

示例：

(0,0)         (200,0)
+-------------+
|             |
|             |
|             |
|      *      |
|             |
|             |
|             |
+-------------+
(0,300)       (200, 300)

在这种情况下，标记 * 位于地图的中心，因此我可以使用以下方法放置它：

.marker {
  position: absolute;
  top: 50%;
  left: 50%
}

然后使用getCenter():

const lngLatObj = map.getCenter()

但如果我不希望标记位于中心，而是位于左侧 20% 和顶部 90% 的位置？

(0,0)         (200,0)
+-------------+
|             |
|             |
|             |
|             |
|             |
|             |
| *           |
+-------------+
(0,300)       (200, 300)

在这里您可以看到地图容器和地图上的标记*。

假设我有*的像素坐标，如何找到那个点的经度和纬度？

我想是这样的：

const x = 40
const y = 270
const point = new mapboxgl.Point(x, y)
const lngLat = point.??

我没有鼠标或触摸事件。该点是固定的，但用户可以缩放和平移地图。

使用 marker 我的意思不是地图框 Marker 而是简单的 div 元素。

非常感谢

here 一个可重现的例子

Answer 1

如果您知道以像素为单位的宽度和高度以及该点的像素坐标，您可以根据 width/height 的百分比计算相应的 lat/lng 值，并使用这些值来偏移地图框的 LngLatBounds.

根据所需的精度，可以进行简单的插值：

var width = 200;
var height = 300;

var x = 40;
var y = 270;

var xPercentage = x / width;
var yPercentage = y / height;

var bounds = map.getBounds();

var long = bounds.getEast() + (xPercentage * (bounds.getEast() - bounds.getWest()));
var lat = bounds.getNorth() + (yPercentage * (bounds.getNorth() - bounds.getSouth()));

如果您需要更高的精度，则必须使用球面计算，但方法是相同的。

Answer 2

我使用 geodesy:

修复

const boundsNorth = new LatLon(bounds.getNorth(), bounds.getCenter().lng)
const boundsSouth = new LatLon(bounds.getSouth(), bounds.getCenter().lng)
const boundsEast = new LatLon(bounds.getCenter().lat, bounds.getEast())
const boundsWest = new LatLon(bounds.getCenter().lat, bounds.getWest())
const lat = boundsNorth.intermediatePointTo(boundsSouth, yPercentage).lat
const lng = boundsEast.intermediatePointTo(boundsWest, xPercentage).lng

将 Point（或 PointLike）转换为 LngLat 对象

Convert a Point (or PointLike) to LngLat object

mapbox

mapbox-gl

mapbox-gl-js