[Cesium] 초기 설정

[Cesium] 초기 설정Language/JavaScript2022. 8. 25. 14:26@고지니어스

Table of Contents

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

Cesium 이란?

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

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

<!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를 사용하면 된다.

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

참고

https://cesium.com/docs/tutorials/quick-start/

'Language > JavaScript' 카테고리의 다른 글

[Openlayers] getGetFeatureInfoUrl 함수 사용 (0)	2022.09.01
[Cesium] 개발 팁 (0)	2022.09.01
[JavaScript] 우편번호 주소 조회 (0)	2022.08.27
[JavaScript] 전화번호 하이픈(-) 자동입력 (1)	2022.08.27
[JavaScript] Chart 라이브러리 정리 (0)	2022.08.25

@고지니어스 :: 규니의 개발 블로그

IT 기술과 개발 내용을 포스팅하는 블로그

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

Cesium 이란?

참고

'Language > JavaScript' 카테고리의 다른 글

티스토리툴바