본문 바로가기
개발 공부 Today I Learned

[국비 83일차 TIL] geoserver 선택한 지역에 해당되는 레이어 표시하기

by 개발자신입 2024. 3. 22.
반응형

지오서버, 오픈레이어스를 활용하여 localhost에 지도 띄우기

postgreSQL 내 데이터 tl_sd, tl_sgg, tl_bjd 테이블 사용해서.

ServletController.java

package servlet.controller;

import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import servlet.service.ServletService;

@Controller
public class ServletController {
	
	@Resource(name = "ServletService")
	private ServletService servletService;
	
	@RequestMapping(value = "/main.do")
	public String mainTest(ModelMap model) throws Exception {
		System.out.println("main start");
        List<Map<String, Object>> sdList = servletService.selectSD();
        List<Map<String, Object>> sggList = servletService.selectSGG();
        List<Map<String, Object>> bjdList = servletService.selectBJD();
        
        model.addAttribute("sdList", sdList);
        model.addAttribute("sggList", sggList);
        model.addAttribute("bjdList", bjdList);
        
		return "main/main";
	}	

}

 

RestFullController

package servlet.controller;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import servlet.service.ServletService;

@RestController
public class RestFullController {

    @Autowired
    private ServletService servletService;
    
    @PostMapping("/getSggList.do")
    public List<Map<String, Object>>  getSggList(@RequestParam("sdValue") String sdValue) {
    	System.out.println("ㅎㅇㅎㅇ");
      List<Map<String, Object>> list = servletService.getSggList(sdValue);
      System.out.println(list);
      return list;
    }
    @PostMapping("/getBjdList.do")
    public List<Map<String, Object>>  getBjdList(@RequestParam("sggValue") String sggValue) {
    	List<Map<String, Object>> list = servletService.getBjdList(sggValue);
    	System.out.println(list);
    	return list;
    }

}

 

ServletService

서비스는 인터페이스다.

package servlet.service;

import java.util.List;
import java.util.Map;

public interface ServletService {
	String addStringTest(String str) throws Exception;

	List<Map<String, Object>> selectSD();

	List<Map<String, Object>> selectSGG();

	List<Map<String, Object>> selectBJD();

	List<Map<String, Object>> getSggList(String sdValue);

	List<Map<String, Object>> getBjdList(String sggValue);

}

 

ServletImpl

package servlet.impl;

import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import egovframework.rte.fdl.cmmn.EgovAbstractServiceImpl;
import egovframework.rte.psl.dataaccess.util.EgovMap;
import servlet.service.ServletService;

@Service("ServletService")
public class ServletImpl extends EgovAbstractServiceImpl implements ServletService{
	
	@Resource(name="ServletDAO")
	private ServletDAO dao;
	
	public String addStringTest(String str) throws Exception {
		List<EgovMap> mediaType = dao.selectAll();
		return str + " -> testImpl ";
	}

	@Override
	public List<Map<String, Object>> selectSD() {
		return dao.selectList("servlet.sdlist");
	}

	@Override
	public List<Map<String, Object>> selectSGG() {
		return dao.selectList("servlet.sgglist");
	}

	@Override
	public List<Map<String, Object>> selectBJD() {
		return dao.selectList("servlet.bjdlist");
	}

	@Override
	public List<Map<String, Object>> getSggList(String sdValue) {
		return dao.selectList("servlet.getSgg",sdValue);
	}

	@Override
	public List<Map<String, Object>> getBjdList(String sggValue) {
		return dao.selectList("servlet.getBjd",sggValue);
	}

}

 

servlet-SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="servlet">

    <select id="sdlist" resultType="HashMap">
        SELECT sd_nm
        FROM tl_sd
    </select>
    
    <select id="sgglist" resultType="HashMap">
        SELECT sgg_nm
        FROM tl_sgg
    </select>
    
    <select id="bjdlist" resultType="HashMap">
        SELECT bjd_nm
        FROM tl_bjd
    </select>
    
    
    <select id="getSgg" parameterType="String" resultType="HashMap">
    	SELECT * FROM tl_sd WHERE sd_nm = #{sdValue}
    </select>

    <select id="getBjd" parameterType="String" resultType="HashMap">
    	SELECT * FROM tl_sgg WHERE sgg_nm = #{sggValue}
    </select>    

</mapper>

 

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>지도</title>
<script
   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
   integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- <script type="text/javascript" src="resource/js/ol.js"></script> OpenLayer 라이브러리
<link href="resource/css/ol.css" rel="stylesheet" type="text/css" > OpenLayer css -->
<script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
<link rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">


<style type="text/css">
.map {
	height: 800px;
	width: 100%
}

.select-box-container {
	display: flex;
	justify-content: left;
	align-items: left;
	height: 50vh;
}

.select-box {
	margin: 0 20px;
}
</style>

</head>

<body>
	<div id="map" class="map"></div>

	<div class="select-box-container">
		<div class="select-box">
			<h2>시도 선택</h2>
			<select id="sdSelect">
				<option value="">선택</option>
				<c:forEach var="row" items="${sdList}">
					<option value="${row.sd_nm}">${row.sd_nm}</option>
				</c:forEach>
			</select>
		</div>
  		
  		<div class="select-box">
			<h2>시군구 선택</h2>
			<select id="sggSelect">
			<option value="">선택</option>
				<c:forEach var="row" items="${sggList}">
					<option value="${row.sgg_nm}">${row.sgg_nm}</option>
				</c:forEach>
			</select>
		</div>
		
		<div class="select-box">
			<h2>법정동 선택</h2>
			<select id="bjdSelect">
				<option value="">선택</option>
				<c:forEach var="row" items="${bjdList}">
					<option value="${row.bjd_nm}">${row.bjd_nm}</option>
				</c:forEach>
			</select> 
		</div>
	</div>
<!------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------>



<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
		})
	});

    // 시도 선택 시 시군구 옵션 업데이트
    $('#sdSelect').on("change", function() {
        var sdValue = $(this).val(); 
        $.ajax({
            type: 'post',
            url: '/getSggList.do', 
            data: { 'sdValue': sdValue }, 
            dataType : "json",
            success: function(response) {
                alert("성공");

                // 시도에 해당하는 레이어 추가
                map.addLayer(new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: 'http://localhost/geoserver/korea/wms?service=WMS',
                        params: {
                            'VERSION': '1.1.0',
                            'LAYERS': 'korea:tl_sd',
                            'CQL_FILTER': "sd_nm LIKE '%" + sdValue + "%'",
                            'SRS': 'EPSG:3857',
                            'FORMAT': 'image/png'
                        },
                        serverType: 'geoserver'
                    }),
                    opacity: 0.5
                }));
            }
        });
    });

    // 시군구 선택 시 법정동 옵션 업데이트
    $('#sggSelect').on("change", function() {
        var sggValue = $(this).val();
        $.ajax({
            type: 'post',
            url: '/getBjdList.do',
            data: { 'sggValue': sggValue },
            dataType: "json",
            success: function(response) {
                alert("성공");

                // 시군구에 해당하는 레이어 추가
                map.addLayer(new ol.layer.Tile({
                    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_nm LIKE '%" + sggValue + "%'",
                            'SRS': 'EPSG:3857',
                            'FORMAT': 'image/png'
                        },
                        serverType: 'geoserver'
                    }),
                    opacity: 0.5
                }));
            }
        });
        });
       });
    // 시도, 시군구, 법정동 선택 시 해당 레이어 표시 및 숨김
	      $('#sdSelect, #sggSelect, #bjdSelect').change(function() {
	        var sdValue = $('#sdSelect').val(); 
	        var sggValue = $('#sggSelect').val();
	        var bjdValue = $('#bjdSelect').val();
	    }); 
</script>
</body>
</html>

 

 

 

3/22 현재의 상황

* 리스트는 다 나오는 상태.

    -> 시도 선택 시, 선택한 시도에 맞게 시군구 불러오기. (법정동도 똑같이)

 

* 선택한 곳의 레이어가 나오는 상태, 그러나 다른 지역을 선택하면 레이어가 삭제되지 않는 상태

    -> 다른 지역 선택 시 이전 레이어 삭제 코드 추가하기

반응형
저작자표시 비영리 변경금지

'개발 공부 Today I Learned' 카테고리의 다른 글

[국비 85일차 TIL] geoserver 데이터베이스에 txt파일 업로드하기 DB연동  (0) 2024.03.26
[국비 84일차 TIL] Vue 프로젝트 생성, geoserver gis 만들기 계속 하는 중  (0) 2024.03.25
[국비 82일차 TIL] geoServer 지도 띄우기 및 시도, 시군구 옵션 셀렉트 박스  (0) 2024.03.21
[국비 81일차 TIL] GeoServer 시도, 시군구, 법정동 구역 구분하기  (0) 2024.03.20
[국비 80일차 TIL] geoserver 시작하는 방법  (0) 2024.03.19

관련글

댓글

티스토리툴바