# 방향에 대한 이해
- vw.Direction(heading = yaw , tilt = pitch , roll)
x 방향 : tilt(pitch)
y 방향 : yaw(heading)
z 방향 : roll
# 단어 뜻을 따지면, 각각의 항목이 의미가 다르나, 단순히 방향의 관점에서 동일하다고 생각하고 작성함.
- vw.CoordZ( 경도, 위도 , 지면으로 부터 높이)
# 방향 전환 소스 코드 (아래 전체 소스 코드 확인)
/**
* 카메라 화면 이동하기
**/
function moveCamera() {
console.group('moveCamera');
// 화면 select 문 값 읽어오기
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;
}
// select 문에 대한 기능 수행
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();
}
# 결과화면
# 테스트 화면 : https://jsbin.com/jusawikoze
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; 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>
'vworld > 3d' 카테고리의 다른 글
| 3.vworld 3d point 생성, 마우스 클릭 이벤트(onClick) , 현재위치 (0) | 2021.09.22 |
|---|---|
| 2. vworld 3d map 이동하기 (0) | 2021.09.21 |
| 1.vworld 3d Map 생성하기 (0) | 2021.09.21 |
미나미나미