Mapbox GL JS에서 오른쪽 하단 위도 경도 얻기

얼마 전 Mapbox GL JS에서 표시중인지도를 PNG로 다운로드하는 버튼을 설치하는 플러그인을 만들었습니다.

데모는 다음과 같습니다.

그 중 빠진 작은 재료를 소개합니다.

지도 오른쪽 하단의 위도 경도를 얻고 싶습니다.

Mapbox GL JS 로 표시되고 있는 지도의 우하의 위도 경도를 취득할 필요가 있어, 빨리 문서를 조사해, 한 번 이하와 같이 구현했습니다.

const bottomRight = map.getBounds().getSouthEast()

getBounds() 에 대해서는 문서에는 이하와 같은 기술이 있습니다.

Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.

후반이 잘 모르겠지만, 뭐라고 꽤 그럴까라고 생각합니다만, 결론으로부터 말하면 이것으로는 안 되었습니다.

Mapbox GL JS 는 벡터 타일이므로 지도가 기울어져 있는 것이 있을 수 있겠지요.



위 이미지와 같이 지도가 기울어진 경우 getBounds() 에서 얻은 위치는 빨간색 화살표입니다.

지도 오른쪽 하단의 위도 경도를 얻는 올바른 방법

그래서 최종적으로 다음과 같은 방법으로 구현했습니다.

const width = map.getContainer().offsetWidth
const height = map.getContainer().offsetHeight
const bottomRight = map.unproject([width, height])

unproject()라는 함수는 픽셀의 위치를 ​​위도 경도로 변환하는 함수입니다. 반대로 위도 경도에서 픽셀로 변환하고 싶을 때는 project() 입니다.

이 함수의 이름 조금 이해하기 어렵습니다. 웃음

뭐하고 싶었는지

이번에 만든 이미지로 내보내는 플러그인은 <canvas />를 PNG로 변환하여 내보냅니다.

처음에, 할 수 있었다고 기뻐하고 있었습니다만, © OpenStreetMap Contributors 가 들어가지 않으면 좋지 않다고 생각해, 그것을 넣고 싶었습니다.

그런데, Mapbox GL JS 로 표시되고 있는 Attribution 는, Canvas 는 아니고 보통의 HTML 텍스트를 위의 레이어에 붙이고 있을 뿐이므로, 이미지에는 들어오지 않았던 것이군요.

그래서 Attribution 용의 캐릭터 라인을 Canvas 에 퍼뜨리는 처리를 실시했습니다.

그 때문에 동적으로 GeoJSON을 만들어 지물로서 삽입한다는 처리를 하고 있었고, 그래서 우하의 위도 경도를 알고 싶었습니다.

해보면 아무것도 아닌 처리였습니다만, 「어차피 화상으로서 낼 뿐이니까, 일시적으로 지물로서 버려 버려」라고 하는 아이디어에 도달하기까지 반 일정 걸려 버렸습니다. . .

(반나절은 Canvas를 직접 조작하려고 노력했다...w)