본문 바로가기
개발, IT

[Cesium] GeoServer 배경지도 연계

by Nabi™ 2021. 1. 26.

GeoServer를 이용하여 배경지도를 WMS로 구축하고

Cesium에서 이를 배경지도로 연계하는 방법입니다.

 

기본 배경지도인 BingMap을 사용하지 않기때문에 WMS영상이 있는곳만 표출되고 나머지 영역의 지도는 파란색으로 표출됩니다.

 

 

<!DOCTYPE html>
<html lang="en">
  <head>    
    <meta charset="utf-8" />    
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
		var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : new Cesium.WebMapServiceImageryProvider({
                url: "http://localhost:9501/geoserver/wms",
                parameters: {
                    format: 'image/png',
                    transparent:'true'
                },
                layers: 'RSMS:SHADOW_1001210'
            }),
       		baseLayerPicker : false
      	});
	
        viewer.camera.flyTo({
          destination : Cesium.Cartesian3.fromDegrees(128.9620265371858, 37.337556498700735, 400),
          orientation : {
            heading : Cesium.Math.toRadians(0.0),
            pitch : Cesium.Math.toRadians(-15.0),
          }
        });	
	
    </script>
  </body>
</html>

댓글