CesiumJS에서 OGC Web Service이용하기 

WMS 서비스

> 서비스바로가기

WFS 서비스

> 서비스바로가기


CesiumJS 위에 OGC WMS 인터페이스가 제공되는 지도서비스를 Overlay 합니다.

WMS (Web Map Service)는 인터넷을 통해 지도이미지(Raster Image)를 제공하는 서비스 입니다.
WFS (Web Feature Service)는  인터넷을 통해 벡터데이터(Vector Graphics)를 제공하는 서비스 입니다.

참조 : WMS와 WFS의 효율적 사용 (Vector Graphics와 Raster Image의 비교)

                                     

1. WMS 활용하기 

* index.html 파일을 생성한 후 아래의 소스코드를 입력합니다.

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">
    <script src="js/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/Cesium-1.50/Build/Cesium/Cesium.js"></script>
    <link href="js/Cesium-1.50/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<script type="text/javascript">
    var baseMap, mapViewer;
 
    $(document)
        .ready(
            function() {
                //실행 시 처음 보여질 범위를 설정
                var extent = Cesium.Rectangle.fromDegrees(117.896284, 31.499028, 139.597380, 43.311528);
                //처음 보여질 범위 중 거리를 설정
                Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
                Cesium.Camera.DEFAULT_VIEW_FACTOR = 5;
 
                Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
 
                var mapViewer = new Cesium.Viewer(
                    'cesiumContainer',
                    {    // 하단 위젯 제거
                        timeline : false,
                        animation : false,
                        selectionIndicator : false,
                        navigationHelpButton : false,
                        infoBox : false,
                        navigationInstructionsInitiallyVisible : false,
                        vaseLayerPicker : true
                    }
);
 
                var wms = new Cesium.WebMapServiceImageryProvider({
                    // 제작한 국가지점번호 데이터 가져오기
                    url: 'http://***.***.***.***/geoserver/progworks/wms',
                    parameters: {
                        format:'image/png',
                        transparent:'true'
                    },
                    layers : 'progworks:national_point_num_5179_to_4326',
                    maximumLevel : 12
                });
                // 가져온 데이터 올리기 
                var imageryLayers = mapViewer.imageryLayers;
                imageryLayers.addImageryProvider(wms);
 
            })
</script>
<body>
<div id="cesiumContainer" style="width: 100%; height: 710px"></div>
</body>
</html>
cs


* geoserver에서 자체 제작한 국가지점번호 레이어를 불러옵니다. 

var wms = new Cesium.WebMapServiceImageryProvider({
                    // 제작한 국가지점번호 레이어 가져오기
                    url: 'http://***.***.***.***/geoserver/progworks/wms',
                    parameters: {
                        format:'image/png',
                        transparent:'true'
                    },
                    layers : 'progworks:national_point_num_5179_to_4326',
                    maximumLevel : 12
                });
                // 가져온 데이터 올리기 
                var imageryLayers = mapViewer.imageryLayers;
                imageryLayers.addImageryProvider(wms);
 


* 프로젝트를 실행합니다.  

> 서비스바로가기


2. WFS 활용하기

* GeoServer 에서 자체 제작한 국가지점번호 레이어를 가져옵니다. GeoJson 형식으로 레이어를 사용했습니다.
  line 36을 아래와 같이 변경합니다.

// 제작한 국가지점번호 레이어 가져오기 
mapViewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://*.***.**.***:8180/geoserver/progworks/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=progworks:national_point_num_5179_to_4326&outputFormat=application/json', {
    // 선 색을 설정
    stroke: Cesium.Color.WHITE,
    // 선의 두께 설정
    strokeWidth: 5
}));                         
cs

* 프로젝트를 실행합니다. 

> 서비스바로가기



'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글

Cesium JS에서 glTF 포맷 활용하기  (1) 2019.02.12
Cesium JS에서 비행 Animation 활용하기  (0) 2019.02.08
Cesium JS에서 시점변경 기능 활용하기  (0) 2019.01.29
Cesium JS에서 3D 모델 생성하기  (0) 2019.01.29
CesiumJS 시작하기  (0) 2019.01.15

+ Recent posts

티스토리툴바