[Openlayers] 점, 선, 면 Feature 그리기

1.오픈레이어스(OpenLayers)란

웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다.

이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Feature , Source, Layer에 대해 간단하게 설명하겠습니다.

2. Feature , Source, Layer

우선 openlayers에는 map이라는 핵심 객체가 있습니다. 그 안에서 Feature , Source, Layer등의 다른 객체들이 모여 map이라는 객체를 구성하게 됩니다.

객체 구성하는 크기의 순을 표현해보자면
Feature -> Source -> Layer순으로 이어집니다.
아래 그림을 통해 세 객체를 간단하게 표현해보았습니다.

1) Feature
Feature은 점(Point), 선(Line), 면(Polygon) 으로 이루어진 객체입니다.
지도위에 다양한 점,선,면 등을 표출할 수 있는데 이러한 점, 선, 면 하나하나가 Feature라고 보시면 됩니다.

2) Source
Feature들이 모이면Source라는 객체가 됩니다.
Source는  Layer의 데이터 원천이 되는 객체라고 할 수 있습니다. GIS에서 쓰이는 SHP나 GeoJSON 등이 대표적인 Source의 예시입니다.

3) Layer
데이터 원천(Source)을 토대로 정의한 데이터셋 (Vector, Raster)입니다.
포토샵을 해보신 분이라면 Layer의 개념을 이해하기 쉬우실겁니다.
위에 그림을 보시면 스케치북 한장 한장을 레이어라고 생각하시면 됩니다.

3. 점, 선, 면 그리기

아래 소스코드는 각각 점, 선, 면의 Feature를
Source에 담고 Layer에 추가하는 예시입니다.
*버전: openlayers6 기준 입니다.
1) Source, Layer 생성
이때 점, 선, 면의 스타일까지 개별로 지정할 수 있습니다.

//source생성
let sample_source = new ol.source.Vector () ;

//Layer생성 (각 점, 선, 면 스타일 지정)
let sample_layer = new ol.layer.Vector ({
  source : sample_source,
  style : new ol.style.style({
    image: new ol.style.Circle ({
      radius : 10,
      fill : new ol.style.Fill ({
        color: 'red'
      })
   }),
   stroke: new ol.style.Stroke ({
      width : 5, 
      color : 'blue'
   }) ,
   fill : new ol.style.Fill({
      color : 'pink'
   })
 })
}) ;
window.map.addLayer (sample layer);

2) new ol.geom.FeatureType
Feature들을 생성합니다.

• 점: new ol.geom.Point(좌표값)

• 선: new ol.geom.LineString(좌표값)

• 면: new ol.geom.Polygon(좌표값)

// 점 Feauture
// ol.proj.transform은 Proj4.js를 사용하여 경위도 좌표계 EPSG: 4326, 구글 좌표계 EPSG: 3857 
// (map좌표계) => 경위도 좌표계를 구글 좌표계로 변환하여 사용하는 라이브러리

var pointCoord = ol.proj.transform ([127.02, 37.49], 'EPSG: 4326', 'EPSG: 3857') ;
var pointFeature = new ol.Feature ({
  geometry: new ol.geom.Point (pointCoord)
});

// 선 Feature
var lineCoord = [
  ol.proj.transform ([127.5, 37.1], 'EPSG:4326' , 'EPSG:3857'),
  ol.proj.transform ([127.6, 36.5], 'EPSG: 4326' , 'EPSG: 3857')
];
var lineFeature = new ol.Feature ({
  geometry: new ol.geom.LineString (lineCoord)
});

// 면Feature
var polycoord = [[
  ol.proj.transform ([127,5, 36], 'EPSG:4326', 'EPSG: 3857'),
  ol.proj.transform ([127.6, 36.1], 'EPSG:4326', 'EPSG: 3857'),
  ol.proj.transform ([127.6, 36.1], 'EPSG: 4326','EPSG: 3857'),
  ol.proj.transform ([127.5, 36.1], 'EPSG: 4326', 'EPSG: 3857'),
  ol.proj.transform ([127.5, 36], 'EPSG: 4326', 'EPSG:3857')
]];
var polyFeature = new ol.Feature ({
  geometry: new ol.geom.Polygon (polyCoord)
});

//Source에 만들어놓은 점, 선, 면 Feature 추가
sample_source.addFeatures ([pointFeature, lineFeature, polyFeature]);

이렇게 하면 아래와 같이
지도상에 점, 선, 면의 객체가 생성된걸 확인하실 수 있습니다