[openlayers] openlayers활용하여 웹상에 지도올리기

https://github.com/openlayers/openlayers/releases/tag/v4.6.5

Release v4.6.5 · openlayers/openlayers

<link rel="stylesheet" type="text/css" href="${contextPath}/ol.css"/>
<script src="${contextPath}/ol.js"></script>

해당 스크립트 불러오고 html에서는 <div id="map"></div>하나만 있으면 된다.

 

 

 

기본맵 설정

control을 사용하여 zoom을 활성화시킬 수 있음

layer에는 올리고싶은 layer을 올려줌

	//기본 맵
	map = new ol.Map({
		pixelRatio : 1,
		controls : ol.control.defaults({
			attribution : false,
			zoom : true
		}),
		layers : [sido_layer,sgg_layer],
		interactions : ol.interaction.defaults({
			shiftDragZoom : true
		}),
		target : document.getElementById('map'),
		view : view,
		logo : false
	});

 

 

 

 

view설정

view = new ol.View({
		center : ol.proj.transform([126.78566, 37.50526], 'EPSG:4326', 'EPSG:3857'),
		zoom : 12,
		extent : ol.proj.transformExtent([ 116.0, 30.0, 136.0, 45.0 ], 'EPSG:4326', 'EPSG:3857'),
		maxZoom : 18,
		minZoom : 6
	});

 

 

 

레이어 발행

WMS로 발행하고싶기때문에 아래와 같이 써준다

visible에 따라 숨김/해제 할 수 있음

추후에 visible설정하는 것은 

test_layer.setVisible(false); 이런식으로 해주면 된다

test_layer = new ol.layer.Image({
		source : new ol.source.ImageWMS({
			url : '주소/geoserver/저장소/wms',
			params : {
				'LAYERS' : '저장소:test_layer',
                'STYLES' : 'style_test',
				'VIEWPARAMS' : viewparams,
                
			},
			serverType : 'geoserver',
			crossOrigin : 'anonymous'
		}),
		layerId : 'test_layer',
		title : 'test 레이어',
		visible : true,
		zIndex : 100
	});