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

Question

For a project I need to convert latitude and longitude coordinates to the map layer (map html canvas) point coordinates (in x and y). I have gone through almost the whole of Mapbox's documentation, but I can't seem to find it. Does anybody know how to do it? (Javascript)

This:

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

Answer 1

Here is an example code from the official website. You have to register from the official website. And then you should get an access token for using Mapbox in your project. So it is quite simple.

You can watch this video to understand visually how to do it.

<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>

Here you see above, in the "center" attribute you can define your own lat(firstly) and lng(secondly)

Answer 2

You can use mapboxgl.Map method called "project". It returns mapboxgl.Point by LngLatLike coordinates.
TypeScript:

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

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