[OpenLayers] Feature를 만들어 보자

오늘 포스팅은 OpenLayers에서 Feature를 컨트롤 하는 방법에 대해 포스팅하고자 합니다.

처음 포스팅을 보신 분들은 아래 포스팅을 통해 기본 OpenLayers 적용하신 후 진행하시면 됩니다.

 

2019/11/18 - [GIS/OpenLayers] - [OpenLayers] 시작하기

 

---

 

Feature Type

OpenLayers Feature의 종류에 대해서 알아보겠습니다.

 

- 점(Point)다

- 점(Multi Point)

- 선(LineString)

- 다 선(Multi LineString)

- 다각형(Polygon)

- 다 다각형(Multi Polygon)

- 원형(Circle)

 

가장 기본적이면서도 많이 쓰이는 Feature들 입니다.

사각형(Square) Feature는 기본적으로 제공해주지 않지만,

원형(Circle) Feature를 변형하여 만드는 방법이 있습니다.

 

 

Feature의 기본 소스는 아래와 같습니다.

 

var feature = new ol.Feature({
  geometry: new ol.geom.FeatureType(좌표값);
});

 

위 소스에서 new ol.geom.FeatureType 부분을 주목해야하는데요.

FeatureType은 위에서 분류한 Feature Type을 명시해 주는 부분입니다.

예를 들어 점(Point) Feature를 생성할때에는 new ol.geom.Point(좌표값) 이 되고

선(LineString)을 생성할 때에는 new ol.geom.LineString(좌표값) 형태로 생성하시면 됩니다.

 

이제 본격적으로 Feature를 생성해보겠습니다.

 

 

---

 

 Create Vector Source & Layer  

 

위에 Feature Type을 기준으로 하나씩 생성해 보겠습니다.

생성하기 전에 Feature들을 Vector Source와 Vector Layer를 생성하겠습니다.

Source는 Feature들이 담기는 그릇이라고 생각하시면 되고

Layer는 하나 혹은 하나이상의 그릇들을 모두 모아서 하나의 그릇보관함이라고 생각하시면 이해가 쉽습니다.

 

Feature -> Source -> Layer 순서 기억하시기 바랍니다.

 

그럼 Source 와 Layer를 생성해보겠습니다.

// Feature들을 담아줄 Source
let featureSource = new ol.source.Vector({});

// Source들을 담아줄 Layer
let featureLayer = new ol.layer.Vector({
	source: featureSource 
    // 여기에서 위에서 생성한 Source를 포함하여 레이어를 생성해줍니다.
});

 

이제 지도위에 Feature들을 찌끄릴(?) 준비가 되었습니다.

참 설레지 않을수가...

 

 

 

 

 Create Feature  

 

Feature Type중에서 이번 포스팅은

점(Point), 다 점(Multi Point) 생성해 보겠습니다.

 

자 그럼 눈 크게뜨시고 시작합니다.

 

var pointFeature = new ol.Feature({
	geometry: new ol.geom.Point([133, 38])
});

var multiPointFeature = new ol.Feature({
	geometry: new ol.geom.MultiPoint(
    	[ [134, 38], [134, 38.5] ]
    )
    // Multi 이기때문에 좌표들을 배열안으로 한번 더 감싸줘야 합니다.
});

 

Feature 생성을 완료했다면 해당 Feature를 처음 생성해 두었던 Source에 담아 줍니다.

 

// addFeature();
featureSource.addFeature(pointFeature);
featureSource.addFeature(multiPointFeature);

// 한 건씩 담아줄때는 addFeature();
// 여러개를 담아줄때는 addFeatures(); 를 사용하시면 됩니다.

// addFeatures( Array );
featureSource.addFeatures( [pointFeature, multiPointFeature] );

 

이렇게 Feature를 생성해보았습니다.

한가지, 지금 입력된 좌표체계는 EPSG:4326 입니다.

하지만 OpenLayers의 기본 좌표체계 설정은 EPSG:3857 로 되어 있기 때문에

위에서 생성한 점들은 안드로메다(?) 어디인가에 떠있게 됩니다.

 

그래서 기본 맵 설정을 아래와 같이 바꿔줍시다.

 

var map = new ol.Map({
	target: 'map',
	layers: [
		new ol.layer.Tile({
			source: new ol.source.OSM()
		})
	],
	view: new ol.View({
		center: [134, 38.5],
		zoom: 8,
		projection: 'EPSG:4326'
        // Projection 어떤 좌표체계로 투영할것인지 설정해주는 부분입니다.
        // Default는 EPSG:3857 입니다.
	})
});

 

자 이제 지도위에 함께 만든 Point들의 꼬라지(?)를 한번 봐야되겠쥬...

최종적으로 Feature들이 담긴 Source를 화려하게 감싸안은(?) Layer를 Map에 추가해줍니다.

 

// .. Create Map 
// .. Create Source & Layer 
// .. Create Features

map.addLayer( featureLayer );

 

 

이제 페이지를 띄워볼까요

아래와 같이 Feature들이 잘 나왔나요?

나의 첫번째 Feature 찌끄레기들...

위치는 동해 언저리에 떠있습니다.

줌을 풀어보시면

 

귀여워~~

이렇게 지도위에 Feature들을 띄워봤습니다.

아직 스타일이 없기때문에 OpenLayers Default Style이 적용되어 있는 모습을 보실수 있습니다.

Feature에 스타일도 적용할 수 있는데요.

이미지아이콘은 물론 텍스트, 선, 면 색상 등 다양한 스타일을 적용할 수 있습니다.

 

이 Feature Style 적용법은 다음 포스팅에서 알아보도록 하겠습니다.