구글맵 좌표계 변환

지도/로컬 API
#1

구글 맵에서 얻은 좌표로 띄워보니 약간의 오차가 있습니다.

  1. 현재 카카오 지도에서 사용하는 좌표계를 알고 싶습니다.

  2. 추가로 좌표변환 API를 실행 시 401 (Unauthorized) 에러가 발생합니다
    11

    해결방법 알려주시면 감사하겠습니다 ~!

#2

  1. 카카오맵 자체적으로 사용하는 것은 EPSG:5181 입니다.
    WGS84 로 사용하셨으니 웬만큼 맞을텐데요… 말씀하신 오차가 어느 정도인 지는 모르겠으나 약간의 오차는 생길 수 있습니다.

  2. Unauthorized 는 앱키 인증에 문제가 있는 경우 입니다.
    용도에 맞는 앱키를 정확히 넘기고 있는 지 다시 한번 체크해보세요.

#3

혹시 위경도만 가지고 이미지를 오버레이 할 방법이 있을까요?
현재는 오버레이 할 사진의 위경도를 mapProjection.pointFromCoords 로 픽셀 위치로 변환하여 오버레이 하는데 이로인한 오차인가 싶어서요
추가적으로 이미지 오버레이시 tiff 파일을 지원하는지 궁금합니다.

#4 
// Class Object:
function GroundOverlay(bounds, imgSrc) {
    this.bounds = bounds;
	var node = this.node = document.createElement('div');
    node.className = 'node';
   
    var img = this.img = document.createElement('img');
    img.style.position = 'absolute';
    img.src = imgSrc;
    img.onmousedown = function(e) { e.preventDefault() };
    
    node.appendChild(img);
}

GroundOverlay.prototype = new kakao.maps.AbstractOverlay;
    
GroundOverlay.prototype.onAdd = function() {
     var panel = this.getPanels().overlayLayer;
	 panel.appendChild(this.node);
};

// 줌인 아웃 시 이미지를 원하는 bounds값에 맞게 표출하기 위해 img style을 정의 및 선언합니다.
GroundOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var ne = projection.pointFromCoords(this.bounds.getNorthEast());
    var sw = projection.pointFromCoords(this.bounds.getSouthWest());
    
    var width = ne.x - sw.x;
	var height = sw.y - ne.y;  
    
    this.img.style.top = ne.y+'px';
    this.img.style.left = sw.x+'px';
    this.img.style.width = width+'px';
    this.img.style.height = height+'px';
}
     
GroundOverlay.prototype.onRemove = function() {
   this.node.parentNode.removeChild(this.node);
};

// Usage:
var bounds = map.getBounds(); // 위경도 Bounds
    
var overlay = new GroundOverlay(bounds, 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png');
overlay.setMap(map);

구글의 지도 위에 올렸던 그라운드 오버레이를 그대로 카카오 지도에 올렸을 경우에 어긋나는 것은 감안하셔야 합니다.
다른 좌표계를 기반으로 했기 때문에 같은 결과를 볼 수 없을 겁니다.

Html5로 만든 도형을 카카오 api 지도위에 올릴 방법이 있을가요?
#5

웹에서 tiff 이미지를 보여주는 방식은
이미지 데이터를 읽어서 Canvas 엘리먼트에 픽셀 정보를 넘겨 그리거나
익스플로러에서 activeX의 도움을 받으셔야 할 겁니다. (이 건 추천하지 않습니다.)

Canvas API를 사용하여 이미지를 그려주는 라이브러리가 있을겁니다.
GroundOverlay 내부 구현을 라이브러리로 그린 이미지를 보여주도록 수정하면 됩니다.

아니면 tiff 파일을 웹상에서 렌더링 가능한 이미지 포멧으로 변환하여 사용하셔야 합니다.

#6

안녕하세요. 혹시 Canvas API 말씀이 외부 라이브러리 활용을 해야한다는 말씀이신거죠???

#7

네 맞습니다.
대충 구글에서 찾아봤는데 있는거 같아서 언급드린거긴 한데,
해본적도 없거니와 딱히 추천드리는 방법은 아니라서 링크를 드리지는 않았습니다.
그냥 웹용 이미지로 변환하여 사용하시는게 여러모로 가장 … 안전하고 편할거 같은데요.

#8

찾아보니 tiff.js 라이브리 사용하여 웹상에 표현해주는 demo 페이지가 있는데 이 라이브러리를 쓰면 해결될 수 있을까요??

tiff로 하고자 한것이, 사용자가 Style(color range) 조정을 할 수 있게 해줘야하거든요…

이미지로 하게되면 kakao api중에 imageMarker 함수가 있는데 이미지로 변환한다고해도 이미지마다 좌표값 설정이 필요할 수 있을 것같은데 아니면 올려주신 groundOverlay로 테스트를 한번 해봐야겠네요…

#9

구현해야 할 스펙을 제가 구체적으로 알 수 없으므로
확실하게 말씀드리긴 어렵지만
일단 저 라이브러리를 사용하면
웹상에 이미지를 표현할 수 있을 것 같긴 합니다.

GroundOverlay를 변형해서 사용하시면
지도의 줌 레벨이 변경되어도 좌표 기반으로 지도에 매핑이 됩니다.
(원하는 기능이 아닐지도 모릅니다.)

#10

아하 감사합니다! ㅎㅎ 2가지 방법 다 테스트 해보고 질문사항있으면 또 남기겠습니다.