[Openlayers] 지도 위에 레이어 생성 레이어 출력하기

OpenLayers. 오픈레이어스

---

지도 위에 무언가 이벤트를 꾸미고싶다면, 아마 오픈레이어스. Openlayers를 사용하는일이 많을 것이다. 내가 오픈레이어스를 처음 적용했던건 Map 위에 Layer 파일을 띄우는것이었다.

 

OpenLayer는 예제가 잘 되어있어서 공식홈페이지에서 단계적으로 활용해도 좋다.

먼저 지도를 뛰우기 위해선 View를 설정해줘야한다.

 

[1. View 설정]

var view = new ol.View({
	zoom : 14, // 초기화면 zoom level
	minZoom : 5, // 최소 zoom level
	maxZoom : 20, // 최대 zoom level
	projection : 'EPSG:4326',
	center : [127.0437, 37.6477]
});

지도가 보여지기 위한 View를 설정해준다. zoom / minZoom / maxZoom은 각각 상태의 zoom level을 의미한다. 숫자가 커질수록 확대기능이 증가한다.

projection은 흔히말하는 좌표계인데, 나는 EPSG:4326이라는 좌표로 초기 설정을 했다. 구글맵이나 OSM, 카카오맵, 네이버맵 등 다양한 지도들은 각각 좌표계가 다르고, 레이어 파일 또한 적용하는 좌표계가 다르기 때문에 본인이 사용하고자하는 좌표계로 설정하는것이 좋다.

center은 화면에서 초기 보여질 중심좌표다. 내가 설정한 좌표는 우리나라의 수도 서울좌표이다.

 

 

[2. Layer 생성 및 셋팅]

var layerExample = new ol.source.TileWMS({
    url : 'http://localhost:8088/geoserver/admin/wms',
	params : {'layers' : 'admin:layerTest', 'TILED' : true},
    serverType : 'geoserver',
    crossOrigin : 'anonymous',
    projection : 'EPSG:4326',
    });

이제 지도위에 나타낼 레이어를 셋팅해보자. 레이어의 경우에는 QGIS를 통해서 만들수있가 있고,

관련 해당글을 잠시나마 링크해보겠음.

https://itkjspo56.tistory.com/166

[QGIS] GeoServer Layer 생성하기 레이어 등록 QGIS연동하기

url은 GeoServer에 등록되어 있는 값인데, 나같은 경우에는 초기 설정 port 를 8088로 지정을 해주었다.

param에서 layer 값은 GeoServer 에서 레이어를 생성할때 이름을 기입해주면 된다. 본인이 만든 저장소의 이름이 admin이고, 발행한 레이어의 이름이 layerTest라면 'admin:layerTest'의 값을 적용시켜주면 된다.

 

 

[3. Map 위에 기본설정과 레이어 셋팅]

지도 위에 보여질 View도 설정을 했고, 출력할 레이어도 모두 생성이 완료되었다면, 이제는 말 그대로 지도 위에 뿌려주는 작업(출력하는)을 진행하면 된다. 쉽게 이해를 한다면 내가 그동안 만들어놨던것들을 지도 위에 박아준다. 라고 이해하면 쉬울 것 같다.

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
        source : new ol.source.XYZ({
            url:'http://api.vworld.kr/req/wmts/1.0.0/(브이월드 인증키)/Base/{z}/{y}/{x}.png'
        }),
    }),
    	
    	new ol.layer.Tile({
    		label : 'layerExample', 
        	source : layerExample,
        	visible : false,
    	}),
    ],
  target: 'map',
  view: view
});

var map으로 변수를 주어 ol.Map import를 통해 layer값을 셋팅해줄 것이다. 레이어는 ol.layer.Tile형식으로 만들수가 있는데, ol.layer.Image 형식으로도 만들수가 있어서 개인이 설정한 환경과 필요목적에 따라 설정하면 좋을 것 같다.

내가 설정한 지도는 vworld라는 맵인데, vworld말고 구글맵이나, 카카오맵, 네이버맵. 그리고 해외에서 가장 기본적으로 되는 OSM 등 다양한데, 각 지도마다 url을 설정해서 source부분에 작업을 해준다.

 

이후에는 설정된 지도 위에 layer.Tile을 올려줘야하는데, 내가 이전에 생성했던 레이저를 layerExample로 지정을 했고, 이것을 source에 대입과 동시에 label 작업을 통해 이름을 설정해줬다. 라벨은 안해줘도 상관은 없지만, 레이어를 생성한 이후에 어떤 작업에 사용될때 label을 입력하는게 비교적 수월하니 개인적으로 입력하는것을 추천.

visible은 말그대로 화면에 보여지냐 안보여지냐인데, true로 할 경우에는 페이지를 띄우자마자 지도위에 레이어가 나타나게 되고, 나같은 경우에는 버튼이나 checkbox를 통해 레이어를 통제하려고했기때문에 초기 설정을 false로 설정해주었다. visible의 초기 설정이 false로 되어있다면, 첫 페이지 지도위에 레이어는 나타나지가 않는다.

 

이렇게 설정된값들을 target에 'map'을 지정해주고, 보여주는 view값을 앞서 설정했던 view를 기입하면 전체적인 지도위에 레이어를 보여주기 위한 셋팅이 끝나게 된다.

 

해당 작업을 완료했다면, 자신이 설정한 지도 위에 자신이 만든 레이어가 정상적으로 나오는것을 확인 할 수 있을것이다.