브이월드) x,y,z 좌표 값 가져오기 (webGL 3D)

안녕하세요 웹코기입니다 !

요즘 브이월드를 이용해 사내 프로젝트를 개발 중입니다.

아래의 링크를 보면 코드 샘플 예시가 잘돼 있어서, 커스텀하기에도 큰 무리가 없을 줄 알았습니다만...

브이월드 커스텀을 위해 가장 필요하고 기본적인 X, Y, Z 좌표를 가져오는 것부터가 막혀서 애를 먹었습니다.

하지만 알아냈어요!! 그 내용을 공유하겠습니다 :)

 

https://www.vworld.kr/dev/v4dv_opnws3dmap2exam_s001.do

공간정보 오픈플랫폼 오픈API

 

 

맵 초기화

그럼 좌표를 가져와봅시다.

우선 좌표를 가져오기 전에 기본적인 지도 생성부터 시작합니다. 

지도 생성은 위 링크의 코드 샘플 예제에도 잘 나와있기 때문에 구체적인 설명은 언급하지 않겠습니다.

// 초기 위치로 이동
var map;
var hX = 127.425;
var hY = 38.196;
var hZ = 13487000;
var hH = 0;
var hT = -90;
var hR = 0;

var sX = 126.92529813255122;
var sY = 37.52509165877161;
var sZ = 10000;
var sH = 0;
var sT = -50;
var sR = 0;


/* begin -------- 맵 초기화 코드 --------- */
function vwmap() {
    var mapOptions = new vw.MapOptions(
        vw.BasemapType.GRAPHIC, "",
        vw.DensityType.BASIC,
        vw.DensityType.BASIC,
        false,
        new vw.CameraPosition(
            new vw.CoordZ(hX, hY, hZ),
            new vw.Direction(hH, hT, hR)
        ),
        new vw.CameraPosition(
            //new vw.CoordZ(126.968007,37.3998313, 1500),
            new vw.CoordZ(sX, sY, sZ),
            new vw.Direction(sH, sT, sR)
        )
    );
    //console.log(mapOptions)
    map = new vw.Map("vmap", mapOptions);   

    setTimeout(function(){
        setMarker(sX,sY, '맵 시작 위치 (위치변경가능)');
        getMapCoods(map);
    },1000);
}

// 웹지엘 지도 호출.
vwmap();


// 마커 셋팅
function setMarker(x, y, name) {
    var point1Coord = new vw.Coord(x, y);
    var pt = new vw.geom.Point( point1Coord );

    pt.setImage("http://map.vworld.kr/images/op02/map_point.png");
    pt.setName(name);
    pt.setFont( "고딕" );
    pt.setFontSize( 20 );
    pt.setDistanceFromTerrain(10);
    pt.create();
}

/* end -------- 맵 초기화 코드 --------- */

위치가 잘 찍힌다 !!

 

 

x, y, z 좌표 찍기

아마 위의 소스를 그대로 붙이셨다면 아래의 함수가 없다고 에러가 뜰 거예요

 

getMapCoords()

 

바로 이 녀석을 구현해서 x, y, z 좌표를 가져와보겠습니다!

 

1. 좌표를 가져온다.

2. 좌표는 클릭했을 때(onClick), 마우스를 지도 위에서 움직일 때 (onMouseMove) 가져온다.

3. 가져온 좌표를 화면상에 표현한다.

// 클릭한 위치 좌표가져오기
function getMapCoods(map){
    setTimeout(function(){
        map.onClick.addEventListener(MapCoordsXy);  
        map.onMouseMove.addEventListener(MapCoordsMouseMoveEvent);
    },200);
}

// x,y 좌표를 뽑아오는 것이 목적인 함수
function MapCoordsXy( windowposition, ecefposition, cartographic, featureInfo ){
    try{
        var x = vw.Util.toDegrees(cartographic.longitude);
        var y = vw.Util.toDegrees(cartographic.latitude);
        var z = vw.Util.toDegrees(cartographic.height);
        
        setXy(x,y,z); 
   }        
}

// 화면에 좌표값 셋팅
function setXy(x,y,z){
    $('#x').text(x);
    $('#y').text(y);
    $('#z').text(z);
}

...

<div id="coordBox">
  <mark>x좌표</mark>
  <div id="x"></div>
  <mark>y좌표</mark>
  <div id="y"></div>
  <mark>z좌표</mark>
  <div id="z"></div>
</div>

좌표를 가져왔다 !!

 

그래서 좌표는 어디에 숨어있나

map.event 객체를 등록할 때, function의 세 번째 매개변수... 에서 xyz좌표를 찾았습니다...!!

 

알고 보니 여기 아래의 코드 샘플에 있었습니다. 숨어있었지만요...

https://www.vworld.kr/dev/v4dv_opnws3dmap2exam_s002.do?exaIde=EXAID_11000000000014&tabMenu=m1&searchKeyword= 

공간정보 오픈플랫폼 오픈API