GIS Developer

ol에서 지오메트리에 대해 buffer나 union 등과 같은 공간 연산 기능에 대한 API를 정리합니다. 공간 연산 기능은 JSTS.js라는 별도의 라이브러리를 통해 수행합니다. JSTS.js는 Java의 JTS 라이브러리를 Javascript 언어로 포팅한 라이브러리입니다. 이글은 공간 연산을 위한 지오메트리를 생성하기 위해 “마우스로 Vector 생성하기(그리기)”라는 글의 코드를 약간 변형하여 사용합니다. ol에서 마우스로 도형을 그리는 API의 설명은 이 글을 참고 하기 바랍니다.

먼저 실행 결과를 아래의 동영상을 통해 살펴볼 수 있습니다.

사용자가 Buffer 연산을 적용할 지오메트리를 그리면 바로 200m 만큼 Buffer 연산이 적용되어 화면에 표시됩니다. 이를 위해 먼저 index.html 파일을 아래처럼 구성합니다.

<!DOCTYPE html>

<html>

<head>

<title>OpenLayers</title>

<style>

html, body {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

#map {

width: 100%;

height: 900px;

}

</style>

</head>

<body>

<form>

<label>Geometry type </label>

<option value="Point">Point</option>

<option value="LineString">LineString</option>

<option value="Polygon">Polygon</option>

</select>

</form>

</body>

</html>

20번 라인에 jsts.js 라이브러리 스크립트를 추가하고 있습니다. index.js 파일에 대해 설명하면 다음과 같습니다.

먼저 필요한 모듈을 추가합니다.

import 'ol/ol.css';

import Map from 'ol/Map.js';

import View from 'ol/View.js';

import Draw from 'ol/interaction/Draw.js';

import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';

import {OSM, Vector as VectorSource} from 'ol/source.js';

import WKT from 'ol/format/WKT.js';

그리고 레이어와 지도를 구성합니다.

var raster = new TileLayer({

source: new OSM()

});

var source = new VectorSource({wrapX: false});

var vector = new VectorLayer({

source: source

});

var map = new Map({

layers: [raster, vector],

target: 'map',

view: new View({

center: [-11000000, 4600000],

zoom: 15

})

});

다음으로 그리고자 하는 도형의 종류를 선택하는 UI의 이벤트 처리와 도형을 그리는 Draw 클래스 타입을 위한 draw 변수를 정의합니다.

var typeSelect = document.getElementById('type');

typeSelect.onchange = function() {

map.removeInteraction(draw);

addInteraction();

};

addInteraction();

var draw;

지금까지는 “마우스로 Vector 생성하기(그리기)”의 내용과 큰 차이가 없습니다. 이제 변경된 가장 중요한 부분인 addInteraction 함수는 아래와 같습니다.

function addInteraction() {

var value = typeSelect.value;

if (value !== 'None') {

draw = new Draw({

source: source,

type: typeSelect.value,

freehand: true

});

draw.on('drawend', function(e) {

var format = new WKT();

var feature = e.feature;

var wkt = format.writeFeature(feature);

var reader = new jsts.io.WKTReader()

var jstsGeom = reader.read(wkt)

var buffered = jstsGeom.buffer(200);

var writer = new jsts.io.WKTWriter()

var bufferedWKT = writer.write(buffered);

var bufferedFeature = format.readFeature(bufferedWKT);

feature.setGeometry(bufferedFeature.getGeometry());

});

map.addInteraction(draw);

}

마우스를 통한 도형 그리기가 완료되면 11번 코드에 등록된 drawend 이벤트 함수가 호출됩니다. 이 이벤트 함수에서 그려진 도형을 WKT로 변환하고 JSTS.js에서 해석할 수 있는 지오메트로로 변환한 후 Buffer 연산을 수행합니다. 그리고 이를 다시 WKT로 변환하고 ol의 지오메트리로 변환하는 과정을 거치게 됩니다. 실행하면 앞서 살펴본 영상과 동일한 결과를 볼 수 있습니다.

타일 방식으로 제공되는 DEM을 이용해 음영기복도를 OpenLayers에서 동적으로 생성해 표시하는 내용을 설명한다.

음영기복도가 무었인지 이 글에서 작성할 코드를 통해 생성되는 최종 결과물을 통해 살펴보자. 아래와 같다.

DEM 데이터를 이용한 음영기복도의 생성은 동적으로 이루어지는데, DEM 데이터는 XYZ 방식의 타일맵으로 제공된다. 이 XYZ 방식의 타일맵을 통해 높이 값을 얻을 수 있다. 이렇게 얻은 높이값을 이용해 음영기복도를 위한 값을 동적으로, 즉 실행중에 계산하여 이미지를 만들어 낸다. 만들어진 이미지는 ImageLayer 클래스의 객체로써 레이어로 처리될 수 있으며, 레이어는 지도의 구성 단위이다. 또한 음영기복도 생성을 위한 연산을 Raster 연산이라고 한다. Raster 연산을 위해서는 Raster라는 데이터소스 클래스가 필요하다. 이처럼 지도(Map), ImageLayer, Raster, XYZ 방식의 타일맵 소스에 대한 클래스 관계도는 아래와 같다.

자, 이제 앞서 언급한 객체를 생성하고 조합해 보자. 먼저 필요한 모듈을 선언한다.

import Map from 'ol/Map.js';

import View from 'ol/View.js';

import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';

import {Raster, XYZ} from 'ol/source.js';

그리고 타일맵 방식으로 서비스 되는 DEM 데이터 소스에 대한 객체는 아래와 같다.

var elevation = new XYZ({

url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',

crossOrigin: 'anonymous',

transition: 0

});

위의 elevation 데이터소스에 대한 Raster 연산 수행이 가능한 Raster 데이터소스 객체는 아래와 같다.

var raster = new Raster({

sources: [elevation],

operationType: 'image',

operation: shade

});

Raster 연산에 대한 함수는 operation 속성으로 지정된 shade 함수이다. 이 shade 함수가 바로 음영기복도를 계산하여 그 결과를 이미지로 반환하는 함수인데, 아래와 같다. (음영기복도 생성을 위한 알고리즘에 대한 설명은 생략함)

function shade(inputs, data) {

var elevationImage = inputs[0]; // 첫번째(0) 데이터소스로 elevation 객체

var width = elevationImage.width;

var height = elevationImage.height;

var elevationData = elevationImage.data;

var shadeData = new Uint8ClampedArray(elevationData.length);

var dp = data.resolution * 2;

var maxX = width - 1;

var maxY = height - 1;

var pixel = [0, 0, 0, 0];

var twoPi = 2 * Math.PI;

var halfPi = Math.PI / 2;

var sunEl = Math.PI * data.sunEl / 180;

var sunAz = Math.PI * data.sunAz / 180;

var cosSunEl = Math.cos(data.sunEl);

var sinSunEl = Math.sin(data.sunEl);

var pixelX, pixelY, x0, x1, y0, y1, offset,

z0, z1, dzdx, dzdy, slope, aspect, cosIncidence, scaled;

for (pixelY = 0; pixelY <= maxY; ++pixelY) {

y0 = pixelY === 0 ? 0 : pixelY - 1;

y1 = pixelY === maxY ? maxY : pixelY + 1;

for (pixelX = 0; pixelX <= maxX; ++pixelX) {

x0 = pixelX === 0 ? 0 : pixelX - 1;

x1 = pixelX === maxX ? maxX : pixelX + 1;

// determine elevation for (x0, pixelY)

offset = (pixelY * width + x0) * 4;

pixel[0] = elevationData[offset];

pixel[1] = elevationData[offset + 1];

pixel[2] = elevationData[offset + 2];

pixel[3] = elevationData[offset + 3];

z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

// determine elevation for (x1, pixelY)

offset = (pixelY * width + x1) * 4;

pixel[0] = elevationData[offset];

pixel[1] = elevationData[offset + 1];

pixel[2] = elevationData[offset + 2];

pixel[3] = elevationData[offset + 3];

z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

dzdx = (z1 - z0) / dp;

// determine elevation for (pixelX, y0)

offset = (y0 * width + pixelX) * 4;

pixel[0] = elevationData[offset];

pixel[1] = elevationData[offset + 1];

pixel[2] = elevationData[offset + 2];

pixel[3] = elevationData[offset + 3];

z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

// determine elevation for (pixelX, y1)

offset = (y1 * width + pixelX) * 4;

pixel[0] = elevationData[offset];

pixel[1] = elevationData[offset + 1];

pixel[2] = elevationData[offset + 2];

pixel[3] = elevationData[offset + 3];

z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

dzdy = (z1 - z0) / dp;

slope = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy));

aspect = Math.atan2(dzdy, -dzdx);

if (aspect < 0) {

aspect = halfPi - aspect;

} else if (aspect > halfPi) {

aspect = twoPi - aspect + halfPi;

} else {

aspect = halfPi - aspect;

}

cosIncidence = sinSunEl * Math.cos(slope) +

cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect);

offset = (pixelY * width + pixelX) * 4;

scaled = 255 * cosIncidence;

shadeData[offset] = scaled;

shadeData[offset + 1] = scaled;

shadeData[offset + 2] = scaled;

shadeData[offset + 3] = elevationData[offset + 3];

}

return {data: shadeData, width: width, height: height};

}

위 코드의 shade 함수의 인자 중 data는 Raster 객체의 beforeoperations 이벤트에 의해 추가적으로 속성값이 추가될 수 있는데 아래와 같다.

raster.on('beforeoperations', function(event) {

var data = event.data;

data.resolution = event.resolution;

data.vert = 1; // 음영기복도의 과고감 정도

data.sunEl = 45; // 태양의 Elevation(단위: Degree)

data.sunAz = 45; // 태양의 Azimuth(단위: Degree)

});

beforeoperations 이벤트는 Raster 연산이 실행되기 직전에 호출되는 함수이며, Raster 연산은 Raster의 데이터소스, 즉 XYZ를 통한 DEM 데이터를 받았을 때 호출된다.

이제 음영기복도에 대한 데이터소스에 대한 모든 정의가 완성되었으므로, 이를 화면에 표시하기 위한 레이어를 아래처럼 생성한다.

1	var imageLayer = new ImageLayer({ source: raster });

마지막으로 지도 객체를 생성하고 위의 imageLayer를 레이어로써 아래 코드처럼 지도에 추가한다.

var map = new Map({

target: 'map',

layers: [ imageLayer ],

view: new View({

extent: [-13675026, 4439648, -13580856, 4580292],

center: [-13615645, 4497969],

minZoom: 10,

maxZoom: 16,

zoom: 13

})

});

글

[OpenLayers] 지오메트리(Geometry)에 대한 공간 연산(JSTS.js 사용)

[OpenLayers] XYZ 방식의 타일 DEM으로 음영기복도(Shade) 레이어 만들기