* 전체 소스코드 내용은 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<html lang='en'>
<meta charset="UTF-8">
<head>
<script src="js/Cesium-1.54/Build/Cesium/Cesium.js"></script>
<link href="js/Cesium-1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
@import url(js/Cesium-1.54/Apps/Sandcastle/templates/bucket.css);
</style>
<div id="cesiumContainer" style="width:auto; height:700px"></div>
<script>
var extent = Cesium.Rectangle.fromDegrees(117.896284, 31.499028, 139.597380, 43.311528);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.7;
var viewer = new Cesium.Viewer('cesiumContainer',{
timeline : false,
animation : false,
selectionIndicator : false,
navigationHelpButton : false,
infoBox : false,
navigationInstructionsInitiallyVisible : false
});
var scene = viewer.scene;
// 위,경도 표출될 라벨의 옵션을 파라미터로 지정
var entity = viewer.entities.add({
label : {
show : true,
showBackground : true,
backgroundColor : Cesium.Color.BLACK,
font : '25px sans-serif',
horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
//verticalOrigin을 top으로 지정
verticalOrigin : Cesium.VerticalOrigin.TOP,
//pixelOffset을 통해 label의 상세 위치를 지정 / Cartesian2 사용(x,y)
pixelOffset : new Cesium.Cartesian2(15, 0)
}
});
// eventhandler 변수에 screenspacehandler를 담음
var eventhandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
// movement가 발생하면 위,경도 값을 표출
eventhandler.setInputAction(function(movement){
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if(cartesian){
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text = '경도 : '+('' + longitude).slice(-7) + '\u00B0' + '\n위도 : '+('' + latitude).slice(-7) + '\u00B0';
}else{
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
</script>
</head>
<body>
</body>
</html>
|
cs |
* 28 ~ 40행은 위,경도를 표출할 라벨의 옵션을 key : value 값, 파라미터로 지정한 부분입니다.
|
|
var entity = viewer.entities.add({
label : {
show : true,
showBackground : true,
backgroundColor : Cesium.Color.BLACK,
font : '25px sans-serif',
horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
//verticalOrigin을 top으로 지정
verticalOrigin : Cesium.VerticalOrigin.TOP,
//pixelOffset을 통해 label의 상세 위치를 지정 / Cartesian2 사용(x,y)
pixelOffset : new Cesium.Cartesian2(15, 0)
}
});
|
cs |
* VerticalOrigin에 대한 설명입니다. (자세한 내용은 CesiumDocument를 참고하세요.)
각 포지션을 통해 라벨이 표출되는 위치를 조정할 수 있습니다.
* Cartesian2에 대한 설명입니다. (자세한 내용은 CesiumDocument를 참고하세요.)
Cartesian2는 2차원적 개념으로 x, y 값을 갖게됩니다.
* 44 ~ 57행은 MouseMove 이벤트를 활용하여 movement가 발생함에 따라 위,경도 값이 표출되게끔 하는 부분입니다.
|
eventhandler.setInputAction(function(movement){
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if(cartesian){
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text = '경도 : '+('' + longitude).slice(-7) + '\u00B0' + '\n위도 : '+('' + latitude).slice(-7) + '\u00B0';
}else{
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
cs |
cartographic변수에 cartesian을 활용한 위,경도 값을 담아줍니다.
* Cartographic에 대한 설명입니다. (자세한 내용은 CesiumDocument를 참고하세요.)
기본적으로 Cartesian3(x,y,z)값을 갖게되며 기본 투영체 및 좌표계로 WGS84를 사용한다는 것을 알 수 있습니다.
결과 화면 보겠습니다.
라벨이 마우스를 따라다니며 위,경도를 알려주는 것을 볼 수 있습니다. 제주 한라산의 위,경도는 사진과 같군요
'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글
| Cesium js 와 Qgis를 활용한 3D 건물 구현하기 (3) | 2019.04.01 |
|---|---|
| (재미삼아) Cesium JS를 활용한 운석 낙하 시뮬레이션 (3) | 2019.03.27 |
| Cesium JS에서 gltf 포맷 활용 및 HeadingPitchRange 설정 (1) | 2019.02.26 |
| Cesium JS 3D 객체에 마우스 이벤트 연동 (7) | 2019.02.19 |
| Cesium JS에서 glTF 포맷 활용하기 (1) | 2019.02.12 |