# vworld 3d Mouse 클릭 이벤트
- vw.map.onClick
이벤트 생성
vw.map.onClick.addEventListener("이벤트 함수 정의');
이벤트 제거
vw.map.onClick.removeEventListener("제거할 이벤트 함수");
- windowPosition, ecefPosition, cartographic
* windowPosition : 지도 안에서의 마우스 x, y 좌표
* ecefPosition : 이동시 마우스의 ECEF 좌표계 x, y, z 좌표
* cartographic : 이동시 마우스의 WGS84 좌표(EPSG:4326).
* 실제 경위도 좌표는 cartographic.longitudeDD, cartographic.latitudeDD를 쓰며, cartographic.height는 높이를 출력한다.
# vworld 3d point 생성
var point1Coord = new vw.Coord(x, 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("클릭 이벤트");
pt.setFont("고딕");
pt.setFontSize(20);
pt.create();
- 결과화면 : https://jsbin.com/yipuleroro
Vworld Map 생성하기
output.jsbin.com
#이벤트 발생 버튼
<p>
<input type="button" onclick="vwmap_create()" value="지도호출">
</p>
<p>
<input type="button" onclick="point_create()" value="지도 센터 위치 포인트 생성">
</p>
<p>
<input type="button" onclick="mouse_onclick_create()" value="왼쪽 마우스 클릭 이벤트 생성">
<input type="button" onclick="mouse_onclick_remove()" value="왼쪽 마우스 클릭 이벤트 해제">
</p># 포인트 생성 코드
function point_create() {
if (!map3d) return null;
// 지도 센터 위치값을 반환(좌표계 EPSG:4326)
const { direction, position } = map3d.getCurrentPosition();
console.log(direction);
console.log(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();
}# map onclick 이벤트 생성, 포인트 생성 코드
/**
* 왼쪽 마우스 버튼 클릭시 발생.
* Map객체의 onClick객체의 addEventListener로 이벤트 설정. removeEventListener()로 이벤트 제거.
* 전달되는 파라미터는 windowPosition, ecefPosition, cartographic
* windowPosition : 지도 안에서의 마우스 x, y 좌표
* ecefPosition : 이동시 마우스의 ECEF 좌표계 x, y, z 좌표
* cartographic : 이동시 마우스의 WGS84 좌표(EPSG:4326).
* 실제 경위도 좌표는 cartographic.longitudeDD, cartographic.latitudeDD를 쓰며, cartographic.height는 높이를 출력한다.
* */
var onclick_event = null;
function mouse_onclick_create() {
if (!map3d) return null;
onclick_event = function (windowPosition, ecefPosition, cartographic) {
console.group('onclick_event');
console.log(arguments);
console.log('windowPosition', windowPosition);
console.log('ecefPosition', ecefPosition);
console.log('cartographic', cartographic);
// 경위도 좌표
var x = vw.Util.toDegrees(cartographic.longitude);
var y = vw.Util.toDegrees(cartographic.latitude);
var z = vw.Util.toDegrees(cartographic.height);
console.log(x, y, z);
var point1Coord = new vw.Coord(x, 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("클릭 이벤트");
pt.setFont("고딕");
pt.setFontSize(20);
pt.create();
console.groupEnd();
}
map3d.onClick.addEventListener(onclick_event);
}
function mouse_onclick_remove() {
if (!map3d) return null;
map3d.onClick.removeEventListener(onclick_event);
}# 전체 소스 코드
<!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>
<!-- fontawesome icon -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</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>
<input type="button" onclick="point_create()" value="지도 센터 위치 포인트 생성">
</p>
<p>
<input type="button" onclick="mouse_onclick_create()" value="왼쪽 마우스 클릭 이벤트 생성">
<input type="button" onclick="mouse_onclick_remove()" 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.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);
}
function point_create() {
if (!map3d) return null;
// 지도 센터 위치값을 반환(좌표계 EPSG:4326)
const { direction, position } = map3d.getCurrentPosition();
console.log(direction);
console.log(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();
}
/**
* 왼쪽 마우스 버튼 클릭시 발생.
* Map객체의 onClick객체의 addEventListener로 이벤트 설정. removeEventListener()로 이벤트 제거.
* 전달되는 파라미터는 windowPosition, ecefPosition, cartographic
* windowPosition : 지도 안에서의 마우스 x, y 좌표
* ecefPosition : 이동시 마우스의 ECEF 좌표계 x, y, z 좌표
* cartographic : 이동시 마우스의 WGS84 좌표(EPSG:4326).
* 실제 경위도 좌표는 cartographic.longitudeDD, cartographic.latitudeDD를 쓰며, cartographic.height는 높이를 출력한다.
* */
var onclick_event = null;
function mouse_onclick_create() {
if (!map3d) return null;
onclick_event = function (windowPosition, ecefPosition, cartographic) {
console.group('onclick_event');
console.log(arguments);
console.log('windowPosition', windowPosition);
console.log('ecefPosition', ecefPosition);
console.log('cartographic', cartographic);
// 경위도 좌표
var x = vw.Util.toDegrees(cartographic.longitude);
var y = vw.Util.toDegrees(cartographic.latitude);
var z = vw.Util.toDegrees(cartographic.height);
console.log(x, y, z);
var point1Coord = new vw.Coord(x, 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("클릭 이벤트");
pt.setFont("고딕");
pt.setFontSize(20);
pt.create();
console.groupEnd();
}
map3d.onClick.addEventListener(onclick_event);
}
function mouse_onclick_remove() {
if (!map3d) return null;
map3d.onClick.removeEventListener(onclick_event);
}
</script>
</body>
</html>
'vworld > 3d' 카테고리의 다른 글
| 4.vworld 방향 전환하기, 높이 조절하기 (0) | 2021.09.25 |
|---|---|
| 2. vworld 3d map 이동하기 (0) | 2021.09.21 |
| 1.vworld 3d Map 생성하기 (0) | 2021.09.21 |
미나미나미