openlayers와 geoserver활용하여 행정경계 표현(3) - openlayers로 웹에서 지도그려주기

openlayers에서 ol.js와 ol.css를 가져와서 script에 넣어준다

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

 

 

아래는 스크립트에서 같이 설명을 하겠다

//전역변수 설정
var map;
var sido_layer;

//지오서버
var geoserver_uri;
var geoserver_url;
var geoserver_wfs_url;

/**
 * 
 */
$(function(){
	
	sido_layer = new ol.layer.Image({
		source : new ol.source.ImageWMS({
			url : '서버주소/geoserver/저장소이름/wms', //geoserver의 서버주소를 넣어주면됨
			params : {
				'LAYERS' : '저장소이름:레이어이름',    //ex) test:layer1 이런식으로
				'STYLES' : '스타일이름',
				'VIEWPARAMS' : 'cd:31050',  //나는 parameter가 필요해서 기본값을 넣어줌
			},
			serverType : 'geoserver',
			crossOrigin : 'anonymous'   //crs정책
		}),
		layerId : 'layer_sido_edge',   
		title : '시도경계레이어',
		visible : true,			//false로 하면 안보임
		zIndex : 100
	});
	
	
    //center과 경계를 설정해준다
    //좌표설정 필수
	var 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
	});
	

	//지도그리기
	map = new ol.Map({
		pixelRatio : 1,
		controls : ol.control.defaults({
			attribution : false,		//지도 컨트롤하는 부분
			zoom : false
		}),
		layers : [ sido_layer ],
		interactions : ol.interaction.defaults({
			shiftDragZoom : true
		}),
		target : document.getElementById('map'),   //map영역을 target으로 잡겠다
		view : view,
		logo : false
	});
	

});

 

 

 

쉽게 완성쓰.....

스타일은 따로 글을 다시 올리겠다..!