ProgrammingLanguageJavaScript

[Cesium] 초기 설정

, , ,

GIS 관련 프로젝트를 하다 보니 오픈소스인 CesiumJS 나 Openlayers 라이브러리를 사용하게 되었다. 최근에는 2D, 3D 모드가 가능한 CesiumJS를 주로 사용하게 되었다.

Cesium 이란?

  • 순수 웹 기불을 이용한 3D Globe 엔진
  • WebGL 기반
  • 다양한 배경 영상/지도 기본 제공
  • 3D / 2.5D / 2D 모드 지원 -> Openlayers3에 통합
  • 카메라 움직임 추적, 시간 시뮬레이션 등 다양한 기능 제공

Cesium 을 시작할 때 초기 설정이 복잡하다. 아래 두 개의 링크를 따라가서 따라 하면 쉽게 할 수 있다. 하지만 웹에서 커스터마이징을 하기 위해 아래 코드처럼 Cesium에서 지원하는 기본적인 기능들을 끄고 지도만 보이도록 설정해야 한다.

API들은 문서나 인터넷 검색으로 찾아봅시다.

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
<!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.81/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>

  <script>
    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.WebMapServiceImageryProvider({
        url: 'http://localhost:8080/geoserver/gwc/service/wms',
        layers: 'osm:osm',
        parameters: {
          service: 'WMS',
          version: '1.1.1',
          request: 'GetMap',
          layers: 'osm:osm',
          srs: 'EPSG:3857',
          crs: 'EPSG:3857',
          format: 'image/png',
          tranparent: true,
          tiled: true,
        },
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
      }),
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      vrButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      projectionPicker: false,
      selectedEntity: false,
      trackedEntity: false,
      clockTrackedDataSource: false,
    });

    const scene = viewer.scene;
    const camera = viewer.camera;
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    const ellipsoid = scene.globe.ellipsoid;
  </script>
 </div>
</body>
</html>

위의 예제는 미리 구축된 Geoserver 를 베이스 맵으로 설정하였다. Geoserver 가 구축되지 않았다면 Cesium에서 제공되는 기본 Provider를 사용하면 된다.

1
2
3
4
5
6
<!-- 예시 -->
<script>
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(), // 기본 지도를 지형지도로 셋팅
  });
</script>

참고

Share