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

[국비 82일차 TIL] geoServer 지도 띄우기 및 시도, 시군구 옵션 셀렉트 박스

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

 

ServletController

 

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

 

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

 

 

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

}

 

ServletDAO

package servlet.impl;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import egovframework.rte.psl.dataaccess.util.EgovMap;

@Repository("ServletDAO")
public class ServletDAO extends EgovComAbstractDAO {
	
	@Autowired
	private SqlSessionTemplate session;
	
	public List<EgovMap> selectAll() {
		return selectList("servlet.serVletTest");
	}

}

 

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>브이월드 오픈API</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v6.15.1/ol.css">
<!-- 제이쿼리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>2DMap</title>
<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
				})
			});

	// sd 시,도
	var wms1 = new ol.layer.Tile(
			{
				source : new ol.source.TileWMS(
						{
							target : 'wms',
							url : 'http://localhost/geoserver/korea/wms?service=WMS', // 1. 레이어 URL
							params : {
								'VERSION' : '1.1.0', // 2. 버전
								'LAYERS' : 'korea:tl_sd', // 3. 작업공간:레이어 명
								'BBOX' : [
										-2.0037508342789244E7,
										-2.00489661040146E7,
										2.0037508342789244E7,
										2.0048966104014594E7 ],
								'SRS' : 'EPSG:3857', // SRID
								'FORMAT' : 'image/png', // 포맷
								/* 'CQL_FILTER' : "sd_nm LIKE '%서울특별시%'" */
							},
							serverType : 'geoserver',
						}),
					    opacity: 0.5 // 투명도 설정
			});

	map.addLayer(wms1); // 맵 객체에 레이어를 추가함

	// sgg 시군구
	var wms2 = new ol.layer.Tile(
			{
				source : new ol.source.TileWMS(
						{
							target : 'wms',
							url : 'http://localhost/geoserver/korea/wms?service=WMS', // 1. 레이어 URL
							params : {
								'VERSION' : '1.1.0', // 2. 버전
								'LAYERS' : 'korea:tl_sgg', // 3. 작업공간:레이어 명
								'BBOX' : [
										-2.0037508342789244E7,
										-2.00489661040146E7,
										2.0037508342789244E7,
										2.0048966104014594E7 ],
								'SRS' : 'EPSG:3857', // SRID
								'FORMAT' : 'image/png', // 포맷
								/* 'CQL_FILTER' : 'col_adm_se=11560' */
							},
							serverType : 'geoserver',
						}),
					    opacity: 0.5 // 투명도 설정
			});

	map.addLayer(wms2); // 맵 객체에 레이어를 추가함

	// bjd 법정동
	var wms3 = new ol.layer.Tile(
			{
				source : new ol.source.TileWMS(
						{
							target : 'wms',
							url : 'http://localhost/geoserver/korea/wms?service=WMS', // 1. 레이어 URL
							params : {
								'VERSION' : '1.1.0', // 2. 버전
								'LAYERS' : 'korea:tl_bjd', // 3. 작업공간:레이어 명
								'BBOX' : [
										-2.0037508342789244E7,
										-2.00489661040146E7,
										2.0037508342789244E7,
										2.0048966104014594E7 ],
								'SRS' : 'EPSG:3857', // SRID
								'FORMAT' : 'image/png', // 포맷
								/* 'CQL_FILTER' : "bjd_nm LIKE '%후암동%'" */
							},
							serverType : 'geoserver',
						}),
					    opacity: 0.5 // 투명도 설정
			});

	map.addLayer(wms3); // 맵 객체에 레이어를 추가함
});
</script>

<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">
				<c:forEach var="row" items="${sdList}">
					<option value="${row.sd_nm}">${row.sd_nm}</option>
				</c:forEach>
			</select>
		</div>
	</div>

</body>
</html>

 

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>

</mapper>

 

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

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

[국비 84일차 TIL] Vue 프로젝트 생성, geoserver gis 만들기 계속 하는 중  (0) 2024.03.25
[국비 83일차 TIL] geoserver 선택한 지역에 해당되는 레이어 표시하기  (0) 2024.03.22
[국비 81일차 TIL] GeoServer 시도, 시군구, 법정동 구역 구분하기  (0) 2024.03.20
[국비 80일차 TIL] geoserver 시작하는 방법  (0) 2024.03.19
[국비 79일차 TIL] 안드로이드 기본 설정  (0) 2024.03.18

관련글

댓글

티스토리툴바