[카테고리:] OpenLayers

ol에서 마우스를 이용해 지도에 도형을 그리기 내용에 대한 정리이다. UI에 대한 DOM 구성은 아래와 같다.

    Geometry type  
    
        LineString
        Polygon
        Circle
        None
    

위의 DOM에 대한 CSS는 아래와 같다.

이제 JavaScript 코드이다. 먼저 필요한 모듈을 import 한다.

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';

배경지도로 OpenStreetMap을 사용하기 위해 아래의 TileLayer 타입의 raster 객체를 생성한다.

var raster = new TileLayer({
    source: new OSM()
});

마우스를 이용해 도형을 그리면 해당 도형이 저장될 벡터 저장소가 필요하다. 이에 대한 저장소와 표현을 위한 레이어 객체를 생성한다.

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

var vector = new VectorLayer({
    source: source
});

위의 2개의 레이어를 구성하여 지도 객체를 생성한다.

var map = new Map({
    layers: [raster, vector],
    target: 'map',
    view: new View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

id가 type인 DOM 요소를 얻어오고, 이 DOM 요소를 통해 사용자가 자신이 그릴 도형의 타입을 선택할때 발생하는 이벤트를 아래처럼 지정한다.

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

typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();

addInteraction 함수는 아래와 같은데, 그릴 도형을 선택하여 선택된 값으로 Draw 타입의 클래스의 객체를 생성해 지도에 Interaction으로써 추가해 준다.

var draw; // 전역 객체

function addInteraction() {
    var value = typeSelect.value;

    if (value !== 'None') {
        draw = new Draw({
            source: source,
            type: typeSelect.value,
            //freehand: false
        });

        map.addInteraction(draw);
    }
}

실행하면 마우스를 통해 내가 원하는 도형을 선택해 그릴 수 있다.

Tile 방식은 지도를 인터넷에서 효율적으로 받아 빠르게 표시하기 위한 방식으로 주로 png나 jpg와 같은 이미지 형식이다. 그런데 이 Tile 방식의 이미지에 표고값을 저장해 서비스하기도 한다. 대표적인 경우가 MapBox에서 제공하는 타일방식의 DEM 서비스이다.

이 글은 ol을 이용해 타일방식으로 서비스 되는 DEM 데이터를 이미지 개념으로 그대로 화면에 표시하는 내용이다. 먼저 html에서 id가 map인 지도를 표시할 DOM을 작성하고 js 코드를 아래처럼 작성한다.

import 'ol/ol.css';

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {XYZ} from 'ol/source.js';
import {Tile} from 'ol/layer.js';

var elevation = new XYZ({
    url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous',
});

var map = new Map({
    target: 'map',
    layers: [
       new Tile({
           source: elevation
       })
    ],

    view: new View({
        extent: [-13675026, 4439648, -13580856, 4580292],
        center: [-13615645, 4497969],
        minZoom: 10,
        maxZoom: 16,
        zoom: 13
    })
});

실행해 보면 다음과 같은 결과를 볼 수 있다.

MapBox에서 제공하는 이 DEM 데이터의 각 화소에 해당하는 실제 높이값은 다음과 같다.

height = blue_channel_value + green_channel_value * 2 + red_channel_value * 3

그럼, 이 DEM 데이터는 어떻게 활용될 수 있을까? 지형에 대한 표고값을 담을 수 있는 DEM은 지형에 대한 3차원 가시화, 입체적인 지형의 음영의 기복을 표시하는 음영기복도, 평균경사도 등과 같은 지형 분석등에 사용되는 매우 중요한 데이터이다. 추후 이 글의 내용을 토대로 DEM 데이터를 이용한 음영기복도를 ol에서 동적으로 생성해 보는 내용을 정리해 보겠다.