[Openlayers] wms 적용하기

list-js.jsp 수정

//init
	function openlayersInit(){
		
		mapLayer = new ol.layer.Tile({ //타일 생성
			title : 'Vworld Map', //이름
			visible : true, //보여짐 여부
			type : 'base', //지도 종류(일반) ---(야간(midnight), 위성(satellite) 등)
			source : new ol.source.XYZ({ //vworld api 사용
				url : 'http://api.vworld.kr/req/wmts/1.0.0/{api 인증키}/Base/{z}/{y}/{x}.png'
			})
		});
		
		var tileImg = new ol.layer.Tile({
			visible : true,
			source : new ol.source.TileWMS({
				url : 'http://localhost:8080/geoserver/gis/wms',
				params : {
					'FORMAT' : 'image/png',
					'VERSION' : '1.1.1',
					tiled : true,
					"STYLES" : "",
					"LAYERS" : "test:TL_SCCO_CTPRVN"
				}
			})
		})

		mapOverlay = new ol.Overlay(({ element: container })); //Overlay 생성, 요소는 컨테이너

		mapView =  new ol.View({ //뷰 생성
			projection : 'EPSG:3857', //좌표계 설정 (EPSG:3857은 구글에서 사용하는 좌표계) 
			center : new ol.geom.Point([ lat, lon ]) //처음 중앙에 보여질 경도, 위도 
				.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
				.getCoordinates(), //포인트의 좌표를 리턴함
				zoom : 14 //초기지도 zoom의 정도값
		});
	
		map = new ol.Map({ //맵 생성	
			target : 'vMap', //html 요소 id 값
			layers : [mapLayer, tileImg], //레이어
			overlays: [mapOverlay], //오버레이
			view : mapView //뷰
		});
		
		 map.on('pointermove', function(evt) { //마우스 올렸을 때
		        var coordinate = evt.coordinate; //마우스가 올려진 좌표값

		        //마커가 있는 곳에 마우스가 올려지면 커서의 스타일을 pointer로 설정
		        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer': '';

		        //마우스를 다른 곳으로 옮길 때를 위해 스위치역할
		        if(hover != null) {
		        	hover = null;
		        }

		        //마우스가 올려진 곳의 마커를 가져와 hover에 저장
		        map.forEachFeatureAtPixel(evt.pixel, function(f) {
		            hover = f;
		            return true;
		        });

		        //마커가 있을 경우
		        if(hover){
		        	console.log(hover);
		            var content =
		            "<div class='__float-tbl'>"
		            + hover.get('name') //이름 값 뽑기
		            + "</div>";

		            //popup-content 부분에 content를 넣어줌
		            content1.innerHTML = content;

		            //오버레이의 좌표를 정해줌
		            mapOverlay.setPosition(coordinate);
		        }else{
		        	content1.innerHTML = '';
		    	}
		    });
		
	}

 

geosever에서 shape파일 적용후 wms url 받아오는 방법은 해당 글을 참고 부탁드립니다!

https://aamoos.tistory.com/516?category=1048442 

[LeafletJs] geoserver 설정, shape 파일 적용, wms 활용