时间戳

首页 > 解决方案 > 将点（或 PointLike）转换为 LngLat 对象

mapbox - 将点（或 PointLike）转换为 LngLat 对象

问题描述

我有一个 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，而是一个简单的 div 元素。

非常感谢

这是一个可重现的例子

标签： mapboxmapbox-gl-jsmapbox-gl

解决方案

如果您知道像素的宽度和高度以及该点的像素坐标，则可以根据宽度/高度的百分比计算相应的纬度/经度值，并使用这些值来抵消地图框的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()));

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

推荐阅读