'2021/09/21'에 해당되는 글 2건

# vworld 3d 이동하기 

 

- vw.CoordZ(X,Y,Z) 클래스 : X(경도), Y(위도), Z(지면으로부터의 높이)

- vw.Direction(heading,tilt,roll) 클래스 : heading(수평방향 회전각도), tilt(수직방향 회전각도),roll(카메라자체 회전각도)

- map3d.moveTo('카메라위치');

  주어진 좌표로 이동한다.


 # 소스 코드 설명

1. 지도 이동 버튼

지도이동버튼

 

 

2.  지도 이동 실행 코드 

지도 이동 실행 코드 


- 결과화면  : https://output.jsbin.com/luziriyuva

 

Vworld Map 생성하기

 

output.jsbin.com

테스트 결과화면


# 전체 소스코드 부분

더보기

<!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;">

        <p>

            <input type="button" onclick="vwmap_create()" value="지도호출">

        </p>

        <!-- 경복궁으로 이동하는 이벤트 버튼 -->

        <p>

            <input type="button" onclick="vmap_move(126.97703026981958, 37.57970200648469,  500)" value="경복궁 이동">

        </p>

        <!-- 서귀포시로 이동하는 이벤트 버튼 -->

        <p>

            <input type="button" onclick="vmap_move(126.56102749819851, 33.25313092244775,  500)" value="서귀포시 이동">

        </p>

    </div>

    <script type="text/javascript">

        var map3d = null;

        function vwmap_create() {

            /**

            vw.MapOptions(

                basemapType, // 2D 초기배경지도

                layersArr, // 레이어목록(3D에서 사용안함)

                controlDensity, // 2D지도 전용.

                interactionDensity, // 2D지도 전용.

                controlAutoArrange, // 2D지도 전용.

                homePosition, // 2D,3D 공통 사용.

                initPosition // 2D,3D 공통 사용.

            );

             **/

            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.42538.1961548700),

                    // vw.Direction(heading,tilt,roll) 클래스 : heading(수평방향 회전각도), tilt(수직방향 회전각도),roll(카메라자체 회전각도)

                    new vw.Direction(-9000)

                ), // 2D, 3D 공통 사용 

                new vw.CameraPosition(

                    new vw.CoordZ(127.42538.1961548700),

                    new vw.Direction(0-900)

                ) // 2D, 3D 공통 사용

            );

 

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

        }

 

        /**

         * 이동할 위치와 높이값을 지정

         **/

        function vmap_move(x, y, z) {

            if (!map3d) alert('지도를 먼저 생성하세요!');

            if (!map3d) return null;

            //  좌표 지점, 카메라 포지션 지정 

            var movePo = new vw.CoordZ(x, y, z);

            var mPosi = new vw.CameraPosition(movePo, new vw.Direction(0-800));

            // map 이동 

            map3d.moveTo(mPosi);

        }

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

,

# vworld 3d Map 생성하기


- map 생성 부분 

vw.Map("맵 위치할 아이디 값", "Map 생성 시 Option정보"); 

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

 

- MapOption 생성 정보

vw.MapOptions(

                basemapType, // 2D 초기배경지도

                layersArr, // 레이어목록(3D에서 사용안함)

                controlDensity, // 2D지도 전용.

                interactionDensity, // 2D지도 전용.

                controlAutoArrange, // 2D지도 전용.

                homePosition, // 2D,3D 공통 사용.

                initPosition // 2D,3D 공통 사용.

            );


- 결과화면

# 테스트 URL - https://jsbin.com/zelasesihe/1


- 전체소소코드

<!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;">
        <p>
            <input type="button" onclick="vwmap_create()" value="지도호출">
        </p>
    </div>
    <script type="text/javascript">
        function vwmap_create() {
            /**
            vw.MapOptions(
                basemapType, // 2D 초기배경지도
                layersArr, // 레이어목록(3D에서 사용안함)
                controlDensity, // 2D지도 전용.
                interactionDensity, // 2D지도 전용.
                controlAutoArrange, // 2D지도 전용.
                homePosition, // 2D,3D 공통 사용.
                initPosition // 2D,3D 공통 사용.
            );
             **/
            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 공통 사용
            );

            var map3d = new vw.Map("vmap", mapOptions);
        }
    </script>
</body>

</html>

 

블로그 이미지

미나미나미

,