브이 월드 좌표 - beu-i woldeu jwapyo

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

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

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

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

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

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

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

웹지엘 3D지도 API 2.0 코드샘플 웹지엘 3D지도 API 2.0 코드샘플을 제공합니다.

www.vworld.kr

맵 초기화

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

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

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

// 초기 위치로 이동
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 -------- 맵 초기화 코드 --------- */

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

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

웹지엘 3D지도 API 2.0 레퍼런스 웹지엘 3D지도 API 2.0 레퍼런스를 제공합니다.

www.vworld.kr

오픈API

• 오픈API 소개
• 2D지도 API 레퍼런스
  • 2D지도 API 2.0 레퍼런스
  • 2D지도 API 1.0 레퍼런스
• 웹지엘 3D지도 API 레퍼런스
  • 웹지엘3D지도API2.0레퍼런스
• 플러그인 3D지도 API레퍼런스
  • 3D지도 API 2.0 레퍼런스
  • 3D지도 API 1.0 레퍼런스
• 배경지도 API 레퍼런스
• WMS/WFS API 레퍼런스
• WMTS/TMS API 레퍼런스
• 데이터 API 레퍼런스
  • 2D 데이터 API 레퍼런스
• 지도검색 API 레퍼런스
  • 검색 API 레퍼런스
  • Geocoder API 레퍼런스
  • 범례이미지 API 레퍼런스
• Static Map API 레퍼런스
• 2D모바일 API 레퍼런스
  • 소개
  • API 레퍼런스
• 3D모바일 API 레퍼런스
  • 소개
  • 3D모바일 API 2.0 레퍼런스
  • 3D모바일 API 1.0 레퍼런스
• 3D데스크톱 API 레퍼런스
  • 소개
  • 데스크톱 API 2.0 레퍼런스

Geocoder API 2.0 레퍼런스

Geocoder API 2.0 레퍼런스입니다.

API 버전 :

소개

• 좌표를 주소로 변환하는 서비스를 제공합니다.
• 요청URL을 전송하면 지오코딩 서비스를 사용하실 수 있으며 일일 지오코딩 요청건수는 최대 40,000건 입니다.
• 단, API 요청은 실시간으로 사용하셔야 하며 별도의 저장장치나 데이터베이스에 저장할 수 없습니다.

좌표를 주소정보로 변환

사용예제

요청파라미터

응답결과

지원좌표계

오류 응답결과

오류메세지