질문1. 타일그리드 1개의 범위를 위도,경도로 표현할 수 있는 방법이 있나요?
질문2. 커스텀타일셋1의 샘플을 참고하여
특정 영역에 타일이미지를 넣으려고 하는데
그리드 x, y값이 어떻게 만들어지는건지 모르겠습니다.
문서상 kakao.maps.Tileset의 설명에
x: column, y:row라고는 되어있으나,
그래서 내가 이미지를 넣고 싶은 구역이 몇행 몇열인지 어떻게 알 수 있는건지 파악이 되지 않습니다.
다음 링크의 답변을 참고하여 tileCoordsToWTM(y, x, z, 타일사이즈)를 사용해보았지만
리턴값을 좌표계 변환 하였을 때 유효한 위도, 경도 값이 나오지 않았습니다.
아래와 같이 타일셋을 생성하고
타일 영역 범위를 구해 이미지를 넣을 x, y값이 해당 타일에 포함된다면 이미지를 반환,
포함되지 않을 경우는 빈 값을 반환해주세요.
또는 GroundOverlay를 통해서 지도에 이미지를 표시할 수 있습니다.
아래 링크 참고해주세요.
https://devtalk.kakao.com/t/topic/107343/2?u=lea.ju
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// Tileset을 생성하고 지도 오버레이로 추가합니다
kakao.maps.Tileset.add('CUSTOM_TILE',
new kakao.maps.Tileset({
width: 256,
height: 256,
getTile: function(x, y, z) {
// x, y, z에 좌하단의 x, y
var wtm_x = x * Math.pow(2, z - 3) * 256 - 30000;
var wtm_y = y * Math.pow(2, z - 3) * 256 - 60000;
var coords = new kakao.maps.Coords(wtm_x, wtm_y);
var latlng = coords.toLatLng();
console.log(latlng.toString());
//tile의 영역 범위를 구해서 이미지가 놓을 좌표가 포함되어 있다면 이미지 반환
//https://apis.map.kakao.com/web/documentation/#LatLngBounds_contain
//아니면 빈 div를 반환해주세요.
return div;
}
}));
// 지도 위에 CUSTOM_TILE 오버레이 레이어를 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.CUSTOM_TILE);