[OpenLayers] 직접 좌표를 지정하여 구성하는 벡터 레이어

ol의 레이어 종류 중 벡터 레이어는 좌표를 통해 클라이언트 단에서 직접 레이어를 그려주는 방식이다. 여기서 좌표는 DBMS에서, 또는 GPX, GeoJSON, IGC, KML, TopoJSON 포맷의 데이터소스에서 받을 수 있는데.. 여기서는 개발자가 직접 좌표를 지정하여 구성하는 내용에 대해 정리해 본다. 이러한 방식은 내가 원하는 데이터 포맷으로부터 벡터 레이어를 구성하기 위한 기반이 되는 내용이기도 하다.

먼저 HTML 구성은 아래와 같다.

index.js에 필요한 코드가 들어가는데.. 먼저 필요한 모듈을 아래처럼 추가한다.

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {LineString, Point, Polygon} from 'ol/geom.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {TileJSON, Vector as VectorSource} from 'ol/source.js';
import {Fill, Icon, Stroke, Style} from 'ol/style.js';

벡터 레이어는 벡터 소스를 통해 구성되는데.. 벡터 소스는 Feature들의 집합이기도 하다. 이 Feature 요소를 3개 생성해보자. 아래처럼..

var pointFeature = new Feature(new Point([0, 0]));

var lineFeature = new Feature(new LineString([[-1e7, 1e6], [-1e6, 3e6]]));

var polygonFeature = new Feature(
    new Polygon([[[-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));

포인트 피쳐, 라인 피쳐, 폴리곤 피쳐를 생성하고 있다. 이 3개의 피쳐로 구성된 데이터소스는 아래처럼 생성된다.

var vectorsource = new VectorSource({
    features: [pointFeature, lineFeature, polygonFeature]
});

데이터소스가 정의되었음으로 이제 시각화를 위한 레이어 객체를 아래처럼 생성한다.

var vectorlayer = new VectorLayer({
    source: vectorsource,
    style: new Style({
        image: new Icon(({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            opacity: 0.95,
            src: 'data/icon.png'
        })),
        stroke: new Stroke({
            width: 3,
            color: [255, 0, 0, 1]
        }),
        fill: new Fill({
            color: [0, 0, 255, 0.6]
        })
    })
});

레이어는 시각화를 위한 개념이 가장 중요함으로 시각화를 위한 스타일을 상세하기 지정하고 있는 것을 알 수 있다. 이제 앞서 생성한 레이어를 구성하여 지도 객체를 생성하면 끝이다.

var map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new TileJSON({
                url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
            })
        }),
        vectorlayer
    ],
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

실행 결과의 화면은 아래와 같다.