1편에 이어서 2편에서는 Image Layer 를 배경지도 위에 표현해보도록 하겠습니다.

 

Image Layer

 

Image Layer를 생성하기 위해 저는 GeoServer에 택지정보시스템에서 제공하는 지구정보데이터를 레이어로 발행시켜두고 진행하였습니다 :)

 

GeoServer를 사용하는 법이 궁금하신 분들은 GeoServer 공식사이트에서 제공하는 메뉴얼을 참고하시면 쉽게 이해하실 수 있습니다. 영어지만 이미지가 모두 첨부되어 있습니다! 본인이 사용하는 버전에 맞는 메뉴얼을 찾아보세요.

 

https://docs.geoserver.org/stable/en/user/index.html

 

GeoServer User Manual — GeoServer 2.20.x User Manual

GeoServer 2.20.x User Manual GeoServer User Manual GeoServer is an open source software server written in Java that allows users to share and edit geospatial data. Designed for interoperability, it publishes data from any major spatial data source using op

docs.geoserver.org

 

Image Layer 를 생성하기 위해 배경지도 맵을 생성합니다.

지난 Vector Layer 와 동일하게 Map 객체를 Layer 와 View 객체를 나누어 선언하여도 되고 함께 사용하셔도 됩니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 배경지도 레이어
let layers = [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
];
 
// 배경지도의 View 객체
let view = new ol.View({
    center: [127.8041858889821835.88559485525495],
    projection : 'EPSG:4326',
    zoom: 7
});
 
// 배경지도가 있는 Map
const map = new ol.Map({
    layers: layers,
    target: 'map',
    id : 'map',
    view: view
});
cs

 

배경지도 맵을 생성한 뒤 이제 Image Layer를 생성할텐데, 그 전에 Openlayers에서 Image Layer 를 사용할 수 있는 Source가 다양하게 있습니다. 

  • ol.source.ImageArcGISRest
  • ol.source.ImageCanvas
  • ol.source.ImageMapGuide
  • ol.source.ImageStatic
  • ol.source.ImageWMS
  • ol.source.Raster

저는 이 중에서 ol.source.ImageWMS 를 사용했습니다. 가장 기본적으로 사용되는 WMS source 이고 GeoServer 에 발행한 레이어를 호출할 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
let wmsSource = new ol.source.ImageWMS({
    url : 'http://192.168.0.50:9001/geoserver/wms'// GeoServer를 설치한 서버의 URL 과 port를 사용합니다.
    params : {'LAYERS' : 'Sample:the_geom'}, // 발행했던 레이어의 이름을 사용합니다. 작업공간이 여러개면서 같은 레이어를 사용할 경우 작업공간 이름까지 선언해주면 더 명확합니다.
// url : 'http://192.168.0.50:9001/geoserver/Sample/wms?service=WMS&version=1.1.0&request=GetMap&layers=Sample:the_geom', // 혹은 url에 service, request, layers, version 등의 요소를 추가하여 사용할 수 도 있습니다.
    ratio : 1,
    serverType : 'geoserver'
});
 
let wmsLayer = new ol.layer.Image({
    source : wmsSource
});
 
map.addLayer(wmsLayer);
cs

어떻게 보면 Vector Layer 보다 쉽게 레이어를 호출합니다 :)

 

Image Layer 생성 화면

 

GeoServer에 발행한 레이어를 배경지도에 추가하여 표출하면 이렇게 나타난다!

이렇게 호출된 Image Layer 에 각 속성정보를 알고 싶을 때는 Openlayers Source의 함수 중 getGetFeatureInfoUrl() 을 사용하여 확인할 수 있습니다.

 

Openlayers에서 제공하는 API 설명

getGetFeatureInfoUrl() 은 좌표, 해상도, 좌표계, 데이터를 읽을 포맷 으로 파라미터를 주면 사용자가 읽어드릴 포맷 형식으로 데이터를 제공받을 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
map.on('click'function (evt) {
    document.getElementById('info').innerHTML = ''// 속성정보를 표출할 div 초기화
 
    let viewResolution = view.getResolution(); // 
    let url = wmsSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:4326', { 'INFO_FORMAT''text/html' }); // 좌표, 해상도, 좌표계, 읽을 포맷
 
    if(url){
        document.getElementById('info').innerHTML = '<iframe width="100%" seamless="" src="' + url + '"></iframe>';
    }
});
cs

 

위와같이 작성하게 되면 지도에 feature 를 클릭하면 info div에 속성정보가 나타나게 됩니다.

 

Image Layer feature 클릭 이벤트 화면

 

역시 캡쳐화면보단 움직이는게 눈에 확 들어오네요!

Vector Layer에 이어 Image Layer 를 지도화면에 표출하는 방법에 대하여 설명을 해보았습니다.

가장 기본적인 Openlayers 기능이면서 레이어를 표출할 때 쓰기에 정리를 해봤습니다.

Image Layer 의 전체 소스도 첨부합니다!

wmsLayers.html
0.00MB

 

앞으로는 레이어를 좀 더 동적으로 만드는 방법이라거나 스타일을 동적으로 변경하는 등, 더 다양한 OpenLayers 기능을 소개해보도록 하겠습니다. 감사합니다 :)

'GIS > Openlayers' 카테고리의 다른 글

[Openlayers] Vector Layer 와 Image Layer - 1  (0) 2022.01.07
[Openlayers] GIS 오픈소스 Openlayers란?  (2) 2022.01.06

안녕하세요. 씨엔스 입니다 :)

 

오늘은 GeoServer에 대하여 간단하게 알아보고자 합니다.

GeoServer 는 지리공간 데이터를 공유하고 편집할 수 있는 Java 로 개발된 오픈 소스 GIS 소프트웨어 서버입니다. 상호운용성을 전제로 개발되었기 때문에, 개방형 표준을 사용하여 다양한 공간 데이터 소스를 서비스할 수 있게 합니다.

 

http://geoserver.org/

 

GeoServer

GeoServer is an open source server for sharing geospatial data. Designed for interoperability, it publishes data from any major spatial data source using open standards. Special Thanks The following products are kindly supporting open source projects like

geoserver.org

 

GeoServer가 제공하는 웹 서비스를 간단하게 그려봤습니다 :)

위에 그림처럼 GeoServer 가 제공하는 서비스는 다양합니다.

각각의 서비스가 어떤 역할을 하고 어떻게 레이어로 제공하는지 알아보겠습니다.

 

WMS(Web Map Service)

  • GIS(지리 정보 시스템) 데이터베이스에서 데이터를 사용하기 위해 맵 서버에서 생성된 지도 이미지를 인터넷상에서 제공하기 위한 표준 프로토콜
  • WMS 요청은 관심 영역과 지리적 레이어를 처리하는것으로 정의
  • WMS 요청에 대한 응답은 이미지(JPEG, PNG 등)로 제공
  • 데이터서버에 저장된 레이어 또는 분석을 통해 생성된 벡터 및 래스터 데이터를 시각화(Visualiziont)하는 서비스
  • Open Geospatial Consortium (OGC)에 의해 개발되어 최초로 공개

 

WFS(Web Feature Service)

  • 웹에서 벡터형식으로 지리정보를 생성,수정,교환되는 방식의 인터페이스 표준
  • Http로 요청하고 XML, GeoJson등으로 받음
  • DB에 저장된 레이어 또는 분석을 통해 생성된 백터,레스터 데이터를 가지고옴
  • 사용자가 편집할 수 없는 WMS와 달리 피쳐 자체로 접근하여 편집 가능

 

WCS(Web Coverage Service)

  • 정적 지도(서버에서 그림으로 렌더링)를 반환하기 위해 공간 데이터를 묘사하는 WMS와 달리 WCS는 자세한 설명과 함께 사용 가능한 데이터를 제공
  • 개별 지리 공간 기능을 반환하는 WFS와 달리 WCS는 시공간 도메인을 속성 범위(다차원적일 수 있음)와 관련시키는 시공간 변화 현상을 나타내는 커버리지를 반환
  • GML , GeoTIFF , HDF-EOS , CF-netCDF 또는 NITF 와 같은 다양한 데이터 형식으로 적용 범위를 전달

OGC에서 제공하는 WCS 모델

WPS(Web Processing Service)

  • 지리자료의 처리, 알고리즘, 계산 등을 수행하기 위한 OGC 서비스
  • 지리정보들에 대한 다양한 처리 서비스(Geo-Processing이란 GIS 데이터를 조작하기 위해 사용되는 작업으로 하나 이상의 입력데이터를 이용하여 자료 처리 후 결과물을 반환하는 형식이며, 일반적으로 중첩, 래스터 분석, 데이터 변환등이 있음 service)들을 웹 상에서 정의하고 접근할 수 있도록 하기 위한 인터페이스이며 모든 OGC 표준 웹 서비스들과 상호호환성을 갖도록 정의
  • 특정 데이터에 직접 바인딩되어 있지 않으며, 클라이언트에 의해 동적으로 주어지는 데이터 또는 데이터 참조(WFS 결과물 등)들을 입력으로 받아들여 이를 처리하는 프로세스 서비스들로 구성
  • 간단한 계산(버퍼 연산 등)에서부터 복잡한 분석 연산(기후 모델의 생성 등)을 지원하며, 원칙적으로 WPS인터페이스를 기반으로 구현함에있어 어떠한 제약사항도 없음

 

- 한줄 요약

  • WMS : 배경지도나 주제도의 시각화 및 범례
  • WFS : 벡터 데이터의 공간 및 속성 조회와 편집
  • WCS : 래스터 데이터의 추출(Subset, Resampling, Reprojection)
  • WPS : 공간분석 및 처리

 

이러한 GeoServer를 어떻게 사용하는지는 다음 글에서 설명해보도록 하겠습니다. :)

+ Recent posts