[API] vworld 3D 지도 API 사용하기

김재연·2022년 6월 23일

vworld 웹지엘 3D 지도 API

🔐 vworld 인증키 필요!

API 레퍼런스

코드샘플

1. 3D 지도 띄우기

<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D Map</title>
    <script type="text/javascript" src="http://map.vworld.kr/js/webglMapInit.js.do?version=2.0
     &apiKey=[인증키]&domain=[인증도메인]"></script>
</head>
<body>
		<div id="vmap" style="width:100%;height:97vh;"></div>
    <script type="text/javascript">
				vwmap()
        function vwmap(){
            var mapOptions = new vw.MapOptions(
                vw.BasemapType.GRAPHIC,
                "",
                eval("vw.DensityType.BASIC"),
                eval("vw.DensityType.BASIC"),
                    false,
                    new vw.CameraPosition(
                    new vw.CoordZ(127.425, 38.196, 13487000),
                    new vw.Direction(-90, 0, 0)
                    ),
                    new vw.CameraPosition(
                    new vw.CoordZ(127.425, 38.196, 1548700),
                    new vw.Direction(0, -90, 0)
                )
            );
            var map3d = new vw.Map("vmap", mapOptions);  
        }
    </script>
</body>
</html>

💡 서울 제외 일부 지역은 3D 건물 지원 X

마우스 스크롤로 확대/축소 가능
Ctrl + 스크롤로 시야 각도 변경 가능

2. 지도 위에 지오메트리 레이어 씌우기 (아래 예시: PolygonZ)

<input type="button" onclick="makeGeometry()" value="PolygonZ">
<input type="button" onclick="mapReset()" value="전체삭제">

<script type="text/javascript">

    var mapOptions = new vw.MapOptions(
    vw.BasemapType.GRAPHIC,
    "",
    vw.DensityType.FULL,
    vw.DensityType.BASIC,
    false,
    new vw.CameraPosition(
        new vw.CoordZ(127.425, 38.196, 13487000),
        new vw.Direction(-90, 0, 0)
    ),
    new vw.CameraPosition(
        new vw.CoordZ(126.921883, 37.524370, 554870),
        new vw.Direction(0, -90, 0)
    )
    );

    map = new vw.Map("vmap", mapOptions);

    function makeGeometry(){

        var point1Coord = new vw.Coord(126.824883, 37.524370);
        var point2Coord = new vw.Coord(126.854883, 37.511370);
        var point3Coord = new vw.Coord(126.884883, 37.511370);

        var ar = new Array();
        ar.push(point1Coord);
        ar.push(point2Coord);
        ar.push(point3Coord);

        var coordCol =  new vw.Collection(ar);
        var polygonZ = new vw.geom.PolygonZ(coordCol );
        polygonZ.setId("polygonZ1");
        polygonZ.setFillColor( new vw.Color(122,255,255,180) );
        polygonZ.setOutLineColor(vw.Color.GOLD);
        polygonZ.setDistanceFromTerrain(10);
        polygonZ.setExtrudeHeight(100);
        polygonZ.create();
    }

    function mapReset(){
        map.clear();
    }
</script>

2-1. 지오메트리 종류

점, 선, 다각형, 원, 입체도형 등
공중에 띄워서 표시도 가능 ( ___Z )

❓ MultiPolygon도 가능한지는 확인해봐야함

2-2. 지오메트리 속성 종류

좌표값, 외곽선 색깔, 채우기 색깔, 땅에서 떨어진 높이, 도형 높이 등 커스텀 가능

2-3. 지오메트리 도형 좌표

var point1Coord = new vw.Coord(126.824883, 37.524370);
var point2Coord = new vw.Coord(126.854883, 37.511370);
var point3Coord = new vw.Coord(126.884883, 37.511370);

var ar = new Array();
ar.push(point1Coord);
ar.push(point2Coord);
ar.push(point3Coord);

var coordCol =  new vw.Collection(ar);
var polygonZ = new vw.geom.PolygonZ(coordCol);
// 속성변환코드는 생략
polygonZ.create();

좌표값들로 Coord 객체를 생성 후 배열에 넣고, 좌표 배열을 Collection 으로 변환한 다음 vw.geom.지오메트리 사용해서 도형으로 변환 → 도형 속성 커스텀 → create() 로 생성

3. 지도 위에 텍스트 문구 출력하는 팝업창

vw.Popup 클래스

var popup = new vw.Popup()
popup.setId("polygonZ1")
popup.setContainer("vmap")
popup.setHTML(<h1>test</h1>)
popup.create();
// 예상 코드....

김재연

일기장같은 공부기록📝

이전 포스트

[기타] 배속 막힌 영상 크롬에서 강제 배속하기

다음 포스트

[Python] 파이썬 문자열 처리 함수

1개의 댓글

밍밍

2024년 4월 9일

혹시 인증받은 도메인은 어디서 받을 수 있는걸까요?ㅠ

답글 달기