본문 바로가기
개발 공부 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

관련글

댓글

티스토리툴바