如何将经纬度坐标转换为 Mapbox 地图图层上的点坐标？答案

【问题标题】：How can I convert lat long coordinates to point coordinates on the map layer in Mapbox?如何将经纬度坐标转换为 Mapbox 地图图层上的点坐标？
【发布时间】：2020-09-23 20:18:46
【问题描述】：

对于一个项目，我需要将纬度和经度坐标转换为地图层（地图 html 画布）点坐标（在 x 和 y 中）。我几乎浏览了 Mapbox 的所有文档，但似乎找不到。有人知道怎么做吗？ (Javascript)

这个：

let point;
coordinates = [20,50]
point = convert(coordinates); // => point = (x, y);

【问题讨论】：

标签： javascript canvas html5-canvas maps mapbox

【解决方案1】：

这是来自官方网站的an example代码。您必须从官方网站注册。然后你应该得到一个在你的项目中使用 Mapbox 的访问令牌。所以很简单。

您可以观看此video 以直观地了解如何操作。

<script>
  mapboxgl.accessToken = '<your access token here>';
  var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [12.550343, 55.665957],
  zoom: 8
});
 
var marker = new mapboxgl.Marker()
.setLngLat([12.550343, 55.665957])
.addTo(map);
</script>

你在上面看到，在“center”属性中，你可以定义自己的 lat(firstly) 和 lng(secondly)

【讨论】：

如何通过特征坐标获取Point对象例如？？？

【解决方案2】：

您可以使用名为“project”的 mapboxgl.Map 方法。它通过 LngLatLike 坐标返回 mapboxgl.Point。
打字稿：

const coordinates: LngLatLike = [37, 55];
const point = map.project(coordinates); // return Point object

// output: {
//   x: 713.802690844605
//   y: 390.2335262644118
// }

【讨论】：