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

编程问答 2022-06-12

问题描述

对于一个项目，我需要将纬度和经度坐标转换为地图图层（地图HTML画布）点坐标（以x和y表示）。我已经阅读了几乎所有MapBox的文档，但似乎找不到。有人知道怎么做吗？ （JavaScript）

此：

select *
from mytable t
where user_id = 1 and (
    select coalesce(sum(balance),0)
    from mytable t1
    where t1.user_id = t.user_id and t1.id < t.id
) < 6
for update

解决方法

这是来自官方网站的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>

在上面看到的“中心”属性中，您可以定义自己的lat（第一）和lng（第二）

,

您可以使用名为“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
// }
canvashtml5-canvasjavascriptmapboxmapboxmaps