이번프로젝트에서 사용한 라이브러리 중에 cesium에 대해 정리하고자 한다.
Spring boot를 사용하는 웹프로젝트에서 사용되므로 다른 환경(Node나 뭐...기타등등)은 다른 글을 참고바람.
Cesium은 3D 지리 공간 데이터 시각화를 위한 오픈 소스 지리 정보 시각화 라이브러리로
Cesium을 사용하면 웹브라우저에서 고성능의 3D 지도와 가상 지구를 생성하고
지구 상에 다양한 공각 데이터를 표현할 수 있다.
자바스크립트 기반으로 작성되어있고 오픈소스로 WebGL을 사용해서
3D 그래픽을 렌더링해서 3D시각화를 구현할 수 있다.
https://cesium.com/learn/cesiumjs-learn/ 를 참고하면된다.
Cesium을 사용하기 위해서는 몇가지 해줘야하는데
가입하기
https://ion.cesium.com/signin/
위의 링크에 가입해서 AccessToken을 발급받아야한다.
다운받기
CesiumJS를 다운받는다.
Cesium-1.105.1 -> Build -> Cesium 폴더 가져다가 resources > static > js폴더에 넣어준다.
기본적인 지도띄우는 방법은 아래와 같다. (https://cesium.com/learn/cesiumjs/ref-doc/)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = '발급받은 토큰';
let viewer = new Cesium.Viewer('cesiumContainer', {
requestRenderMode: true,
timeline: false,
animation: false,
selectionIndicator : false,
navigationHelpButton : false,
infoBox : false,
navigationInstructionsInitiallyVisible : false,
baseLayerPicker: false,
sceneModePicker: false,
homeButton : false,
fullscreenButton:false,
bottomContainer: false,
creditDisplay : false,
geocoder:false,
terrainProvider: Cesium.createWorldTerrain()
});
viewer._cesiumWidget._creditContainer.parentNode.removeChild(
viewer._cesiumWidget._creditContainer
);
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(35.6, 28, 150000),
orientation: {
heading : Cesium.Math.toRadians(0.0), //0.0:북쪽
pitch : Cesium.Math.toRadians(-90), //0:수평, -90:수직하향
roll : 0.0
}
});
</script>
</div>
</body>
</html>kml로 지도에 지리정보 표현하기
우선 kmz파일을 가지고 kml로 변환 후 지리정보를 표출했다.
kmz뿐 아니라 다른 방법으로도 지리정보 표출은 가능하다.
KML 및 KMZ는 둘다 지리 정보를 표현하기 위한 파일 정보이다.
지도 데이터, 경로, 지리적인 위치의 주석등 다양한 용도로 사용된다.
KML은 지리 공간 데이터를 기반으로 하는 XML 기반의 파일 형식으로, 주로 지리 정보 시각화 및 교환에 사용된다. KML은 구글 어스(Google Earth)와 같은 지리 정보 시각화 도구에서 널리 지원되며, 웹 매핑 서비스와도 통합할 수 있다.
KMZ는 KML 파일과 관련 리소스(이미지, 모델 등)를 압축하여 하나의 파일로 묶은 것으로 KMZ 파일은 KML 파일을 더 효율적으로 공유하고 전송할 수 있도록 도와준다. KMZ 파일은 일반적으로 다른 사용자와 지리 정보를 교환하거나 웹에서 다운로드할 때 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = '발급받은 토큰';
let viewer = new Cesium.Viewer('cesiumContainer', {
requestRenderMode: true,
timeline: false,
animation: false,
selectionIndicator : false,
navigationHelpButton : false,
infoBox : false,
navigationInstructionsInitiallyVisible : false,
baseLayerPicker: false,
sceneModePicker: false,
homeButton : false,
fullscreenButton:false,
bottomContainer: false,
creditDisplay : false,
geocoder:false,
terrainProvider: Cesium.createWorldTerrain()
});
viewer._cesiumWidget._creditContainer.parentNode.removeChild(
viewer._cesiumWidget._creditContainer
);
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(35.6, 28, 150000),
orientation: {
heading : Cesium.Math.toRadians(0.0), //0.0:북쪽
pitch : Cesium.Math.toRadians(-90), //0:수평, -90:수직하향
roll : 0.0
}
});
//KML 추가본
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.dataSources.add(Cesium.KmlDataSource.load('./폴더명/파일이름',
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
clampToGround: true,
})
);
</script>
</div>
</body>
</html>
KML에 띄워진 정보를 더블클릭하면 클로즈업되는데 나는 그 기능이 필요없어서 제거했다.
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
기본적으로 전체 기능 사용을 원한다면 위에 코드는 삭제하면된다.
그리고 적용하고 캐시정리 꼭해주고....재시작하쟈....ㅠㅠ
'언어 > JavaScript' 카테고리의 다른 글
| html5-qrcode 사용정리 (0) | 2023.06.29 |
|---|---|
| Jquery 기본 정리 (0) | 2023.05.22 |
| [JavaScript] 오류 확인 (0) | 2023.03.08 |
| var / let / const 차이점 (0) | 2023.03.01 |
