Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
<!DOCTYPE html>
<html>
​
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Vworld Map 생성하기</title>
    <!-- vworld 스크립트 호출 -->
    <script type="text/javascript"
        src="https://map.vworld.kr/js/webglMapInit.js.do?version=2.0&apiKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9"></script>
​
</head>
​
<body>
    <!-- Map을 생성할 부분  -->
    <div id="vmap" style="position: absolute; width:99%;height:100vh;"></div>
    <!-- Map 생성 시 필요한 설정 부분  -->
    <div
        style="left:10px; position: absolute; z-index: 1; width: 200px; height: 150px; background-color: #ffffff80; padding: 5px;">
        <p>
            <input type="button" onclick="vwmap_create()" value="지도호출">
        </p>
​
        <p>
            <select id="select">
                <option value="0">북쪽</option>
                <option value="90">동쪽</option>
                <option value="-90">서쪽</option>
                <option value="180">남쪽</option>
                <option value="-90">지면</option>
                <option value="0">정면</option>
                <option value="0">높이 증가</option>
                <option value="0">높이 감소</option>
            </select>
            <input type="button" onclick="moveCamera()" value="카메라 위치 변경">
        </p>
    </div>
    <script type="text/javascript">
        var map3d = null;
        function vwmap_create() {
            var mapOptions = new vw.MapOptions(
                vw.BasemapType.GRAPHIC, // 2D 초기배경지도 
                "", // 레이어목룩(3D에서 사용안함)
                vw.DensityType.BASIC, // 2D 지도 전용
                vw.DensityType.BASIC, // 2D 지도 전용
                false, // 2D 지도 전용 
                new vw.CameraPosition(
                    //  vw.CoordZ(X,Y,Z) 클래스 : X(경도), Y(위도), Z(지면으로부터의 높이)
                    new vw.CoordZ(127.425, 38.196, 1548700),
                    // vw.Direction(heading,tilt,roll) 클래스 : heading(수평방향 회전각도), tilt(수직방향 회전각도),roll(카메라자체 회전각도)
                    new vw.Direction(-90, 0, 0)
                ), // 2D, 3D 공통 사용 
                new vw.CameraPosition(
                    new vw.CoordZ(127.425, 38.196, 1548700),
                    new vw.Direction(0, -90, 0)
                ) // 2D, 3D 공통 사용
            );
​
            map3d = new vw.Map("vmap", mapOptions);
​
            // vw.EventProcess.add("test01", map3d.onMoveEnd, test01);
        }
​
        /**
         * 카메라 화면 이동하기  
         **/
        function moveCamera() {
            console.group('moveCamera');
            const e = document.getElementById("select");
            console.log(e);
            var value = parseInt(e.options[e.selectedIndex].value);
            var text = e.options[e.selectedIndex].text;
            console.log(value, text);
​
            const { direction, position } = map3d.getCurrentPosition();
            // 중심점 그리기
            point_create();
​
            let zh = 0;
            if (position.z <= 5000) {
                position.z = 30000;
            }
            switch (text) {
                case "북쪽":
                    direction.setHeading(value);
                    break;
                case "서쪽":
                    direction.setHeading(value);
                    break;
                case "동쪽":
                    direction.setHeading(value);
                    break;
                case "남쪽":
                    direction.setHeading(value);
                    break;
                case "지면":
                    direction.setTilt(value);
                    position.z = 5000;
                    break;
                case "정면":
                    direction.setTilt(value);
                    position.z = 100;
                    break;
                case "높이 증가":
                    zh = position.z;
                    position.z = zh + 1000;
                    break;
                case "높이 감소":
                    zh = position.z;
                    position.z = zh1 - 1000;
                    break;
                default:
                    break;
            }
            // 카메라 보는 방향 조정하기
             map3d.lookat.moveTo(
                new vw.CameraPosition(
                    new vw.CoordZ(position.x, position.y, position.z),
                    new vw.Direction(direction.heading, direction.tilt, direction.roll)
                )
            );
            console.groupEnd();
        }
​
        /**
         * 현재 중심점 포인트 생성 
         **/
        function point_create() {
            if (!map3d) return null;
​
            // 지도 센터 위치값을 반환(좌표계 EPSG:4326)
            const { direction, position } = map3d.getCurrentPosition();
            console.log('point_create', direction);
            console.log('point_create', position);
​
            var point1Coord = new vw.Coord(position.x, position.y);
            var pt = new vw.geom.Point(point1Coord);
            //   pt.setId("point1");
            pt.setImage("https://img.icons8.com/external-flatart-icons-solid-flatarticons/64/000000/external-map-point-real-estate-flatart-icons-solid-flatarticons-1.png");
            pt.setName("2차원 포인트 1");
            pt.setFont("고딕");
            pt.setFontSize(20);
            pt.create();
        }
    </script>
​
</body>
​
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers