[GeoServer] 시도, 시군구, 범례 레이어 겹치지 않게

<!------------------------------------------------------------------------------------------------->
<!------------------------------------- OpenLayers MAP -------------------------------------------->
<!------------------------------------------------------------------------------------------------->
<script type="text/javascript">
$(document).ready(function() {
	
let map = new ol.Map(
		{ // OpenLayer의 맵 객체를 생성한다.
			target : 'map', // 맵 객체를 연결하기 위한 target으로 <div>의 id값을 지정해준다.
			layers : [ // 지도에서 사용 할 레이어의 목록을 정희하는 공간이다.
			new ol.layer.Tile(
		{
		source : new ol.source.OSM(
		{url : 'https://api.vworld.kr/req/wmts/1.0.0/5FEEDEDB-3705-3E32-8DC7-583B0B613B26/Base/{z}/{y}/{x}.png' // vworld의 지도를 가져온다.
		})
		}) ],
	view : new ol.View({ // 지도가 보여 줄 중심좌표, 축소, 확대 등을 설정한다. 보통은 줌, 중심좌표를 설정하는 경우가 많다.
		center : ol.proj.fromLonLat([ 128.4,
				35.7 ]),
		zoom : 7
	})
});

//<!------------------------------------------------------------------------------------------------->
//<!---------------- 시도 선택 시 시군구 옵션 업데이트 및 새로운 시도 레이어 추가 ------------------->
//<!------------------------------------------------------------------------------------------------->
$('#carbonMap').on("click", function() {

      // 시도 메뉴를 클릭했을 때 시군구 레이어가 있을 경우 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'sggLayer') {
            map.removeLayer(layer);
        }
    });

    // 시도 메뉴를 클릭했을 때 법정동 범례 레이어가 있을 경우 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'newBjdLayer') {
            map.removeLayer(layer);
        }
    }); 
    // 이전에 추가된 범례 레이어를 찾아서 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'bjdLayer') {
            map.removeLayer(layer);
        }
    });
});
    
    
//새로운 시도 레이어 생성
var newSdLayer = new ol.layer.Tile({
	name: 'sdLayer',
    source: new ol.source.TileWMS({
    	target: 'newSdLayer',
        url: 'http://localhost/geoserver/korea/wms?service=WMS',
        params: {
            'VERSION': '1.1.0',
            'LAYERS': 'korea:tl_sd',
            'SRS': 'EPSG:3857',
            'FORMAT': 'image/png'
        },
        serverType: 'geoserver',
    })
});

$('#sdSelect').on("change", function() {
    var sdValue = $(this).val().split(',')[0]; //sd_cd
    
    // 기존에 추가된 시도 레이어가 있을 경우 제거
/*     map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'sdLayer') {
            map.removeLayer(layer);
        }
    }); */
    
    // 기존에 추가된 시군구 레이어가 있을 경우 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'sggLayer') {
            map.removeLayer(layer);
        }
    });
    
    // 이전에 추가된 범례 레이어를 찾아서 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'bjdLayer') {
            map.removeLayer(layer);
        }
    });
    
    //--------------- 선택된 시/도의 geom값을 가져와서 지도에 표시 ---------------//
    var geom = $(this).val().split(',')[1]; // x 좌표
       
    // alert("도시코드:"+sdValue+", 좌표:"+geom);
    
    var regex = /POINT\(([-+]?\d+\.\d+) ([-+]?\d+\.\d+)\)/;
    var matches = regex.exec(geom);
    var xCoordinate, yCoordinate;
     
    if (matches) {
        xCoordinate = parseFloat(matches[1]); // x 좌표
        yCoordinate = parseFloat(matches[2]); // y 좌표
    } else {
        alert("GEOM값 가져오기 실패!");
    }

    var sidoCenter = ol.proj.fromLonLat([xCoordinate, yCoordinate]);
    map.getView().setCenter(sidoCenter); // 중심좌표 기준으로 보기
    map.getView().setZoom(10); // 중심좌표 기준으로 줌 설정
    
	// PARAM 추가해줘야 AJAX 로 PARAM 보내줄 수 있음
    newSdLayer.getSource().updateParams({'CQL_FILTER' : "sd_cd = " + sdValue});
       
    //map.addLayer(newSdLayer); // 맵 객체에 레이어를 추가함
    
    //--------------- 시도 선택 시 시군구 불러오기 옵션 & 레이어 추가 ---------------//
    let sggOpt = `<option value="0">선택</option>`; // 시군구 Option html String
    let sggDd = document.querySelector("#sggSelect"); // 시군구 드롭다운
    
    $.ajax({
        type: 'post',
        url: '/getSggList.do', 
        data: { 'sdValue': sdValue }, 
        dataType: "json",
        success: function(data) {
        	console.log(data); // 배열로 출력됨. 이거 가져다 쓰면 됨!! (오류 해결)
        	sggDd.innerHTML = "";
        	for(let i = 0; i < data.length;i++) {
                 sggOpt += "<option value='"+ data[i].sgg_cd+"'>"+ data[i].sgg_nm+"</option>";
          	  }
        		sggDd.innerHTML = sggOpt;
        	},
        	error : function(error){
                alert("문제발생"+error);
            }
    }); 
    map.addLayer(newSdLayer);
});

//<!------------------------------------------------------------------------------------------------->
//<!-------------- 범례, 범례 시군구 선택 시 법정동 옵션 업데이트 및 새로운 시군구 레이어 추가 ----------------->
//<!------------------------------------------------------------------------------------------------->
  $('#sggSelect').on("change", function() {
	 var sggValue = $("#sggSelect option:checked").val();
	 console.log(sggValue);
	 
	    // 기존에 추가된 시군구 레이어가 있을 경우 제거
	    map.getLayers().forEach(function (layer) {
	        if (layer.get('name') === 'sggLayer') {
	            map.removeLayer(layer);
	        }
	    });
	    
	    // 이전에 추가된 범례 레이어를 찾아서 제거
    map.getLayers().forEach(function (layer) {
        if (layer.get('name') === 'bjdLayer') {
            map.removeLayer(layer);
        }
    });
	    
	    // 새로운 시군구 레이어 생성
	    var newSggLayer = new ol.layer.Tile({
	        name: 'sggLayer', // 레이어의 이름을 설정하여 추후에 식별할 수 있도록 함
	        source: new ol.source.TileWMS({
	            url: 'http://localhost/geoserver/korea/wms?service=WMS',
	            params: {
	                'VERSION': '1.1.0',
	                'LAYERS': 'korea:tl_sgg',
	                'CQL_FILTER': "sgg_cd = " + sggValue,
	                'SRS': 'EPSG:3857',
	                'FORMAT': 'image/png'
	            },
	            serverType: 'geoserver',
	        })
	    });
	    map.addLayer(newSggLayer); // 맵 객체에 새로운 시군구 레이어를 추가함
	});
     
   //<!----------------------------------------------------------->
   //<!---------------------- 범례 ------------------------>
   //<!----------------------------------------------------------->
     $("#insertbtn").click(function() {
    	    // 기존에 추가된 시도 레이어가 있을 경우 제거
    	    var sdLayer = map.getLayers().getArray().find(function(layer) {
    	        return layer.get('name') === 'sdLayer';
    	    });
    	    if (sdLayer) {
    	        map.removeLayer(sdLayer);
    	    }
    	    
    	    // 기존에 추가된 시군구 레이어가 있을 경우 제거
    	    var sggLayer = map.getLayers().getArray().find(function(layer) {
    	        return layer.get('name') === 'sggLayer';
    	    });
    	    if (sggLayer) {
    	        map.removeLayer(sggLayer);
    	    }
    	    
    	    var sggValue = $("#sggSelect option:checked").val();
    	    if (!sggValue) {
    	        alert("시군구를 선택하세요.");
    	        return;
    	    }
    	    var sdValue = $("#sdSelect option:checked").val(); 
    	    if (!sdValue) { 
    	        alert("시도를 선택하세요."); 
    	        return;
    	    }
    	    
    	    
   	    var legend = $("#legendSelect").val();
   	    var sggValue = $("#sggSelect option:checked").val(); /* 아래에서 cql 필터로 걸러줄거 선언 */
           
   	    var style = (legend === "1") ? 'bjd_equal' : 'bjd_natural';
   	    alert((legend === "1") ? "등간격 스타일을 적용합니다." : "네추럴 브레이크 스타일을 적용합니다.");
   	    
   	    $.ajax({
   	        url: "/legend.do",
   	        type: 'POST',
   	        dataType: "json",
   	        data: { "legend": legend },
   	        success: function(result) {
   	        	// console.log(sggValue+"안녕");
   	            var newBjdLayer = new ol.layer.Tile({
   	                name: 'bjdLayer',
   	                source: new ol.source.TileWMS({
   	                	target: 'bjd_CQL',
   	                    url: 'http://localhost/geoserver/korea/wms?service=WMS',
   	                    params: {
   	                        'VERSION': '1.1.0',
   	                        'LAYERS': 'korea:b3_bjd_view',
   	                        'CQL_FILTER': "sgg_cd = " + sggValue,
   	                        'SRS': 'EPSG:3857',
   	                        'FORMAT': 'image/png',
   	                        'STYLES': style,
   	                    },
   	                    serverType : 'geoserver',
   	                })
   	            });
   	            map.addLayer(newBjdLayer);
   	        },
   	        error: function(){
   				alert("범례실패");
   	        }
   	    });
   	}); 
 });
  
</script>