[OpenLayers] 드론 등의 자체 항공영상 Tiff 활용방안 예시

[공공칠빵]

[OpenLayers] 드론 등의 자체 항공영상 Tiff 활용방안 예시

자체 촬영한 항공영상을 GeoServer + OpenLayers를 활용하여 업무에 사용하는 방안을 정리합니다.

관련글
(1) [FGIS_App 개발킷] FGIS_App API와 소스로 응용프로그램 만들기 기초
(2) "FGIS/App Class화 컴포넌트"

대용량의 조각과 부정형 모양의 tiff파일을 받아 사업에 사용하실경우 크게 2가지로 사용을 요약해봅니다.

(1)첫번째로는 원본 Tiff를 그대로 사용하는 방안으로 조각조각의 tiff파일을 일일이 합치거나 낱개로 서비스발행하여 그룹으로 묶어 발행할 수도 있습니다. 여기서는 GeoServer의 "래스터 데이터 저장소 / GeoTIFF - Tagged Image File Format with Geographic information"를 사용하였습니다.

그러나 해상도/용량에 비례하여 너무너무 느립니다.

그래서 GeoServer에 내장 된 GeoWebCache을 사용하여 GeoServer에서의 대용량 GeoTIFF를 WMS과 WMTS 서비스 발행을 하는 것을 권장합니다. 다만 GeoWebCache 생성시간과 용량/유효기간 등의 유동적인 요소에 민감합니다.

가. GeoServer에서의 WMS서비스하기
- GeoServer에서 GeoTIFF 저장소를 만들어 등록합니다.
- 서버의 부하가 별로 없다면 원하는 지도영역을 한장의 이미지로 등록되는 방식이지만, 벡터지도의 WMS보다는
느린거 같습니다. 물론 레이어 생성창에서 "타일 캐시 설정"을 활성화하고, 타일 캐시/타일 레이어에서
GeoWebCache로 생성하면 WMTS에도 사용되지만 GeoServer에서는 통합적인 서비스로 속도 개선이 됩니다.
- 여러 축척에서 그때 그때마다 최상의 해상도를 서비스하고 설치 및 갱신시 유지보수가 편하지만, 서버 부하에
따라 서비스 속도를 장담하기 어렵다는 흠이 있습니다.
​
=> OpenLayers에서는 Image(ImageWMS)레이어나 Tile(TileWMS)레이어로 생성해서 사용합니다.
그러나 상당히 느립니다.

나. GeoServer에서의 WMTS서비스하기
- GeoServer 타일 캐시/타일 레이어에서 GeoWebCache로 서비스
- 물론, 미리 만들어 놓는것도 좋으나, 클라이언트들이 호출시 계속 캐시로 누적되는 방식이라 위 2가지의 장단점을
다 가지고 있습니다.
- 미리만든다면 위1번처럼 레벨별 타일로 만드는 시간도 많이 걸리고, 서버가 그동안 느려집니다.
그리고 갱신시에도 이런 작업을 계속 해야하는 유지보수 문제도 걸립니다. 변동이 심한 벡터데이터는 금물.
또한, QGIS 등 데스크탑 프로그램으로 만드는것보다 불안정하겠지요
- 미리 안만들면, 처음 서비스 개시일엔 느립니다.
그리고 큰문제로 WMS는 비동기식으로 서버가 결과를 제때 못주더라도 클라이언트는 잘 돌아갑니다.
그러나 WMTS는 서버가 실시간 타일을 만들고 보내주랴 부하가 걸려 타 서비스에도 영향을 주고,
클라이언트는 각각의 타일이니 몇개의 타임스케줄에 걸려 상당히 버벅거립니다.
- 이러한 단점으로 서버에서는 17레벨 이상을 만드는걸 권장하지 않구요(GeoServer에서는 20레벨이상이라지만,
전국 지도를 해보니 16정도가 좋습니다)
그리고, 클라이언트에서도 16레벨이상의 resolutions을 사용하지 않는게 좋습니다.
=> OpenLayers에서는 Tile(WMTS)레이어로 생성해서 사용합니다.
function createTileWMTSLayer(LayerName, LayerTypename, _levelCount, minZoom, maxZoom, _visible, _crossOrigin, _opacity){
if(maxZoom)maxZoom = maxZoom-1; if(!minZoom)minZoom = Map_View.getMaxZoom();
if(!_crossOrigin) _crossOrigin = 'anonymous';
else if(_crossOrigin == "null") _crossOrigin = null;
if(!_opacity) _opacity = 0.7;
var FGIS_WMTSURL = geoserverURL + 'gwc/service/wmts';
var gridsetName = 'EPSG:900913';
var gridNames = [
'EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4'
, 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9'
, 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14'
, 'EPSG:900913:15', 'EPSG:900913:16'
, 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
gridNames.length = _levelCount;
var resolutions = [
156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625
, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453
, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017
, 4.777314267158508, 2.388657133579254
, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
resolutions.length = _levelCount;
var projection = new ol.proj.Projection({
code: 'EPSG:900913',
units: 'm',
axisOrientation: 'neu'
});
var params = {
'VERSION': '1.0.0',
'STYLE': "",
'TILEMATRIX': gridNames,
'TILEMATRIXSET': gridsetName,
'SERVICE': 'WMTS',
'FORMAT': 'image/png'
};
return new ol.layer.Tile({
id: LayerName,
name: LayerName,
layerName: LayerName,
source: new ol.source.WMTS({
url: FGIS_WMTSURL,
layer: LayerTypename,
matrixSet: params['TILEMATRIXSET'],
format: params['FORMAT'],
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256,256],
extent: [-2.003750834E7,-2.003750834E7,2.003750834E7,2.003750834E7],
origin: [-2.003750834E7, 2.003750834E7],
resolutions: resolutions,
matrixIds: params['TILEMATRIX'],
crossOrigin: _crossOrigin,
}),
crossOrigin: _crossOrigin,
style: params['STYLE'],
wrapX: true,
VERSION: params['VERSION']
}),
opacity: _opacity,
minResolution: resolutionForZoom(minZoom),
maxResolution: resolutionForZoom(maxZoom),
visible: _visible
});
};

*****************************************************************************************************************************

(2)두번째방법으로는 타일맵을 만들어 TMS로 서비스하는 방법입니다.

GeoServer가 필요없는 방법입니다.

QGIS를 사용해서 Tile로 레벨별 미리 만들어서 TMS레이어로 서비스하기

- 위성/항공사진을 전국 통으로 받았거나, 우리가람(하천안내지도) 처럼 특정 업무용 지도, 또는 도로/건물 등

벡터 수치지도로 별도의 스타일로 구성하여 백그라운드로 서비스할때 많이 사용합니다.

- 타일맵을 만드는 툴은 많으나 편리상 QGIS의 QTiles(QGIS Python Plugins)을 사용하여 보았습니다.

- 3가지중에 제일 빠르나, 미리만들어야하니(밤낮으로 돌려야하니) 시간과 용량이 많이 들어갑니다.

- 그리고 설치도 시간이 어마어마하게 들구요, 제일중요한건 갱신하는 유지보수비를 엄청 들어간다는겁니다.

QGIS를 사용해서 Tile로 레벨별 미리 만들어서 TMS레이어로 서비스하기

사용법은 인터넷에서 찾아보시면 됩니다. 실행도 간단합니다. 단, 서비스할 좌표계를 미리 설정(변경)하시고는게 좋습니다.

아니면 예전 브이월드/구글 좌표계에 네이버나/다음지도 중첩시키듯 좌표계에 따라 openlayers에 수많은 코딩 또는 원본의 해상도를

잃어버립니다 ㅠㅠ.

*****************************************************************************************************************************

(3) 팁. 이미 타일맵을 만들었으나 저사양과 배경의 빈공간의 투명성을 안줘서 테두리에 흰 여백이 있으경우

레이어의 그리기전후의 이벤트 precompose/postcompose에서 context의 globalCompositeOperation 로 직접 canvas에 색을 합성연산하여 이미지 색을 바꾼다.

흰색 여백 테두리는 없앴다. 그러나 내부의 밝은색은 뒷 배경의 색상에 의해 간섭되어 원본과 달라진다. ㅠㅠ.

//드론영상 레이어 생성
var dronemap_layer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
crossOrigin: 'anonymous',
url: mainurl + "/TileMap/{z}/{x}/{y}.jpg",
maxZoom: 19,
tileSize: [512,512],
imageSmoothing: false,
transition: 0,
}),
minResolution: resolutionForZoom(map.getView().getMaxZoom()),//resolutionForZoom(19),
maxResolution: resolutionForZoom(14),
visible: true,
});
dronemap_layer.values_.StyleEx = "필터적용";
map.getLayers().insertAt(3, dronemap_layer);
dronemap_layer.on(['precompose','prerender'], function(evt) {
var _StyleEx = dronemap_layer.values_.StyleEx;
if(_StyleEx == "필터적용") evt.context.globalCompositeOperation='darken';
else evt.context.globalCompositeOperation='source-over';
});
dronemap_layer.on(['postcompose','postrender'], function(evt) {
evt.context.globalCompositeOperation='source-over';
});

* 데모 : http://www.gisapplication.kr/OL/Muan/