4. 4
Ⅰ. OpenGeo Suite 설치
제품 구성
• GeoEXT(OpenLayers+ExtJS):
웹에서 지도 콘트롤과 UI 제공
• GeoWebCache:
지도 컨텐츠를 타일단위 캐시
• GeoServer:
공간자료를 지도형태
(WMS, WFS, WCS, KML 등)로 서
비스
• PostGIS :
DBMS로서 공간자료를 유지관리
5. 5
Ⅰ. OpenGeo Suite 설치
다운로드 및 설치
http://opengeo.org/products/suite/register/
6. 6
Ⅰ. OpenGeo Suite 설치
OpenGeo Suite 시작
Tomcat과 포트충돌 (8080)
포트수정(8088)
정상구동 시작
7. 7
Ⅰ. OpenGeo Suite 설치
Dashboard의 기능
서비스 시작/종료 • PostGIS와 GeoServer 동시에 시작/종료
데이터 관리 • PostGIS로 Shape 올리기
• GeoServer로 데이터 올리기
• PostgreSQL 데이터 관리(pgAdmin)
레이어 관리 • 레이어 확인 (GeoExplorer)
• 레이어 스타일 관리 (Styler)
• 레이어 피처 편집 (GeoEditor)
• 레이어 캐시 설정 (GWC)
설정관리 • 포트관리 (GeoServer, PostGIS)
• GeoServer 데이터 폴더 관리
• 암호관리 (GeoServer, PostGIS)
• PostGIS관리 (pqAdmin)
• GeoServer관리 (Admin Page)
• 레이어 캐시 설정 (GWC)
관렦문서 연결 • Getting Started
• FAQ
• PostGIS Documentation
• GeoServer Documentation
• GeoWebCache Documentation
• GeoEditor Documentation
• Styler Documentation
• GeoExplorer Documentation
로그 확인 • GeoServer 로그
9. 9
Ⅱ. PostGIS
Shape 올리기 • Username: postgres 기본 관리자 유저
• Password: postgres 기본 암호
• Server Host: localhost 내 컴퓨터에 설치한 경우
• Service Port: 54321 데시보드에서 설정한 PostGIS 포트
• Database: Administrator 설치한 OS 유저의 유저명
• Destination Schema: public 기본 스키마
• SRID: 4326 WGS84 경위도 EPSG 코드(spatial_ref_sys 테이블에 있는 값)
• Destination Table: cities 로드할 Shape 파일명과 동일
• Geometry Column: the_geom 공간컬럼명
• DBF file character encoding: CP949 한글 윈도우 기본 코드페이지
Dashboard PostGIS Import shapefiles
pgAdmin III Plugins PostGIS Shapefile and DBF Loader
[시작] 모든 프로그램 OpenGeo Suite pgShapeLoader
17. 17
GeoServer
Ⅲ. GeoServer
GeoServer가 하는일
WMS
PNG
JPEG
GIF
Tiff
KML
KMZ
SVG
GeoRSS
PDF
OpenLayers
AtomPub
WCS
ArcGrid
Text Debug Grid
BMP
GeoTIFF
TIFF
PNG
JPEG
WFS
WMS
WCS
Vector
Data
Raster
Data
Feature
Object
Formatted
Map
Coverage
Data
요청 영역에 해당하는 점, 선, 폴리곤 등의 도형 객
체를 제공.
어떻게 그려야 하는지는 사용자에게 맡긴다.
요청 영역에 해당하는 지도를 이미지나 심벌이 포
함된 벡터로 제공.
어디서나 동일하게 해석할 수 있는 심벌로 렌더링
요청 영역에 해당하는 레스터 GIS 자료(분류, 그리
드값 등)를 제공
이미지 형태로 제공되어도 셀의 값에 의미가 있다.
WFS
GML2
GML2-GZIP
GML3.1
GML3.2
GeoJSON
CSV
WFS Sample
http://labs.metacarta.com/flickrbrowse/flickr.py/flickr?format=WFS&sort=i
nterestingness-
desc&service=WFS&request=GetFeatures&srs=EPSG:4326&maxfeatures
=100&bbox=-180,-90,180,90
WMS Sample
http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi?LAYERS=Found
ation.GTOPO30&VERSION=1.3.0&EXCEPTIONS=INIMAGE&SERVICE=WM
S&REQUEST=GetMap&STYLES=&FORMAT=image/jpeg&SRS=EPSG:432
6&BBOX=-135,-270,135,270&WIDTH=768&HEIGHT=384
WCS Sample
GeoServer Admin Page Demo WCS request builder
18. 18
Ⅲ. GeoServer
data_dir
• GeoServer에서 사용할 모든 데이터는 서버의 data_dir에 있어야 한다.
• 기본적으로 OpenGeo Suite 설치한 User 폴더의 .opengeo/data_dir 혹은 GeoServer설치 폴더의 data_dir
• 데시보드 Preferences 텝의 Data Directory 에서 변경 가능
• GEOSERVER_DATA_DIR 홖경 변수에서도 변경 가능
• 서비스할 데이터, 심벌, 워크스페이스 구성, GWC 캐시 등이 들어간다.
• 반드시 여유공간이 많은 디스크로 설정해야 한다.
19. 19
Ⅲ. GeoServer
데이터 올리기 (1)
1. http://demo.grida.kr/demo/sample/worldmap.zip : 벡터 세계지도 샘플
2. http://demo.grida.kr/demo/sample/bluemarble_wgs84_tif.zip : 한반도지역 위성영상(나사 블루마블)
샘플 다운로드
1. C:UsersAdministrator.opengeodata_dirdataWorldMap 에 worldmap.zip 압축 해제
2. C:UsersAdministrator.opengeodata_dirdatabluemarble 에 bluemarble_wgs84_tif.zip 압축 해제
data_dir에 복사
1. http://localhost:8088/geoserver 에 접속
2. admin / geoserver로 로그인
3. 왼쪽 Data 항목 중 Workspaces 선택
4. Add new workspace 선택
5. Name에 demo, Namespace에 http://demo.grida.kr 입력하고 [Submit]
Workspace
20. 20
Ⅲ. GeoServer
데이터 올리기 (2)
1. 왼쪽 Data 항목 중 Stores 선택
2. Add new store 선택
3. Directory of spatial files (shapefiles) 선택
4. Workspace에 demo, Data Source Name에 WorldMap, Directory of shapefiles에
file:data/WorldMap 입력하고 [Save]
5. 왼쪽 Data 항목 중 Layers 선택
6. Add layer from에 demo:WorldMap 선택
7. 레이어 리스트에 있는 LatLon 의 Publish 를 선택
8. Declared SRS에 EPSG:4326 입력
9. Compute from data 선택
10. Compute from native bounds 선택
11. [Save] 선택
12. Layers 리스트 중 추가한 LatLon 레이어가 등록 되었는지 확인
13. 왼쪽 Data 항목 중 Layers 선택
14. Add layer from에 demo:WorldMap 선택
15. 레이어 리스트에 있는 모든 레이어의 Publish 를 선택하여 상기 과정 반복
16. 왼쪽 Data 항목 중 Layer Preview 선택
17. 레이어 리스트 중 demo:WorldCountries 의 OpenLayers 선택
18. 국가들이 잘 보이는지 확인
Shape Layer 등록
21. 21
Ⅲ. GeoServer
데이터 올리기 (3)
1. 왼쪽 Data 항목 중 Stores 선택
2. Add new store 선택
3. PostGIS 선택
4. Workspace에 demo, Data Source Name에 PostGIS, host에 localhost, port에 54321, database에
Administrator, schema에 public, user에 postgres, passwd에 postgres입력하고 [Save]
5. 왼쪽 Data 항목 중 Layers 선택
6. Add layer from에 demo:PostGIS 선택
7. 레이어 리스트에 있는 cities 의 Publish 를 선택
8. Compute from data 선택
9. Compute from native bounds 선택
10. [Save] 선택
11. Layers 리스트 중 추가한 cities 레이어가 등록 되었는지 확인
12. 왼쪽 Data 항목 중 Layer Preview 선택
13. 레이어 리스트 중 demo:cities 의 OpenLayers 선택
14. 도시들이 잘 보이는지 확인
PostGIS 등록
22. 22
Ⅲ. GeoServer
데이터 올리기 (4)
1. 왼쪽 Data 항목 중 Stores 선택
2. Add new store 선택
3. GeoTIFF 선택
4. Workspace에 demo, Data Source Name에 bluemarble, URL에 file:data/bluemarble/wgs84.tif 입
력하고 [Save]
5. 왼쪽 Data 항목 중 Layers 선택
6. Add layer from에 demo:bluemarble 선택
7. 레이어 리스트에 있는 wgs84 의 Publish 를 선택
8. Declared SRS에 EPSG:4326 입력
9. [Save] 선택
10. Layers 리스트 중 추가한 wgs84 레이어가 등록 되었는지 확인
11. 왼쪽 Data 항목 중 Layer Preview 선택
12. 레이어 리스트 중 demo:wgs84 의 OpenLayers 선택
13. 영상이 잘 보이는지 확인
위성영상 등록
23. 23
Ⅲ. GeoServer
심벌라이징 (1)
1. 왼쪽 Data 항목 중 Style 선택
2. Add new style 선택
3. Name에 demo_cities 입력
4. Copy from existing style에서 point 선택하고 copy… 누르기
5. 20행의 <CssParameter name="fill">#FF0000</CssParameter> 의 색 값을 #DDDDDD로 변경
6. [Validate] 버튼 눌러 상단에 No validation errors. 메시지 확인
7. [Submit] 눌러 종료
8. 왼쪽 Data 항목 중 Layers 선택
9. 레이어 리스트 중 demo 웍스페이스의 cities 레이어 선택
10. Publishing 탭 선택
11. Default Style에서 demo_cities 선택
12. [Save] 버튼 눌러 종료
13. 왼쪽 Data 항목 중 Layer Preview 선택
14. 레이어 리스트 중 demo:cities 레이어의 Styler 선택
15. Styler 창의 왼쪽 하단 Legend에서 Red square 선택
16. Name에 City, Symbol에 circle, Size에 3 입력
17. Stroke에 체크 하고 Style에 solid, Color에 #000000, Width에 1 입력
18. [Save] 눌러 완료하여 변경 확인
Point Symbol
24. 24
Ⅲ. GeoServer
심벌라이징 (2)
1. 왼쪽 하단 Legend에서 [Add new] 선택
2. Name에 Capital, Symbol에 square, Size에 6 입력
3. Fill color에 파란색 선택
4. Style 창에서 Labels 탭 선택
5. Label Features 체크
6. Label values에서 name 선택
7. Arial을 폰트로 선택하고 Halo에 체크
8. Advanced 탭을 선택
9. Limit by condition 체크 하고 조건 입력하는 곳에서 capital, =, Y 입력 (수도만 필터링)
10. [Save] 눌러 완료
11. 왼쪽 하단 Legend에서 City 선택
12. Style 창에서 Labels 탭 선택
13. Label Features 체크
14. Label values에서 name 선택
15. Arial을 폰트로 선택하고 Halo에 체크
16. Advanced 탭을 선택
17. Limit by scale 체크하고 Min scale limit 체크. 1에 30000000 입력
18. Limit by condition 체크 하고 조건 입력하는 곳에서 capital, <>, Y 입력 (수도 아닌 것만)
19. 수도는 크게, 일반 도시는 작게 보이고 젂 지구영역으로 축소시 수도만 보이는지 확인
조건에 따른 심벌
25. 25
Ⅲ. GeoServer
Layer Group
※ LayerGroup을 이용하면 여러 레이어로 구성된 지도를 쉽게 서비스 할 수 있다.
1. 왼쪽 Data 항목 중 Layer Groups 선택
2. Add new layer group 선택
3. Name에 WorldMap 입력
4. [Add Layer…] 선택
5. wgs84 레이어 선택
6. [Add Layer…] 선택
7. WorldCountries 레이어 선택
8. [Add Layer…] 선택
9. LatLon 레이어 선택
10. [Add Layer…] 선택
11. cities 레이어 선택
12. [Generate Bounds] 선택
13. [Save] 선택하여 완료
14. 왼쪽 Data 항목 중 Layer Preview 선택
15. WorldMap 레이어 그룹의 OpenLayers 선택
27. 27
Ⅳ. GeoEXT
GeoEXT 란?
OpenLayers ExtJS
• ExtJS는 주로 고급 UI를 쉽게 구현하기 위해 사용
• jQuery는 자비스크립트 코딩을 단순화 하기 위해 사용
• 둘 다 자바스크립트 라이브러리
• 여러 브라우저에서 동일한 코딩으로 동작하도록 크로스 브라우징을 지웎
• 웹에서 지도 콘트롤 제공
• 구글, 야후, 빙 등 상용지도 부착
• WMS, WFS, KML 등 표준 컨텐츠 부착
• 지도상에 객체를 그리고 편집
• 지도와 객체들의 이벢트 처리
• Grid, Tree, Chart, Tab, Window 등
다양한 콘트롤 제공
• Desktop Application 느낌의 UI
• 크로스 브라우징 제공
• GIS 데이터 조작을 위한 UI 작성
ExtJS vs jQuery
http://www.sencha.com/products/extjshttp://www.openlayers.org/
28. 28
Ⅳ. GeoEXT
간단한 샘플
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1 id="title">OpenLayers Example</h1>
<div id="tags">simple, basic</div>
<p id="shortdesc">
Demonstrate a simple map with an overlay that includes layer
switching controls.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This is a basic example demonstrating the use of a map with
two layers and a few controls.</p>
<p>View the <a href="example.js" target="_blank">example.js</a>
source to see how this is done.</p>
</div>
<script src="../OpenLayers.js"></script>
<script>
var map = new OpenLayers.Map("map");
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: "basic"}
);
var dm_wms = new OpenLayers.Layer.WMS(
"Canadian Data",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
},
{isBaseLayer: false, visibility: false}
);
map.addLayers([ol_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
</script>
</body>
</html>
29. 29
Ⅳ. GeoEXT
샘플 찾기
OpenLayers는 샘플이 잘 되어 있어 다음 경로에서 검색하면 잘 나온다.
Class Documentation에서 상세한 설명을 볼 수 있다.
1. 다음의 경로에 웹 브라우저로 접속한다.
http://www.openlayers.org/dev/examples/
2. 상단 검색창에 웎하는 검색어를 입력한다.
3. 아래 나온 검색 결과 중 웎하는 것을 선택한다.
4. 샘플 페이지의 동작을 확인한다.
5. 웎하던 샘플이라면 오른쪽 마우스를 눌러 소스 보기를 한다.
6. 소스를 바탕으로 자싞의 웹 지도에 기능을 구현한다.
• 구글 지도를 어떻게 부착해야 하지? google
• 풍선 도움말을 붙일 수 없을까? popup
• 폴리곤을 그릴 수는 없나? polygon
• KML을 붙일 수도 있나? kml
• WMS도 가능한가? wms
• 지도가 이동된 때에 뭔가 할 수 없을까? move event
• 스마트폰용 지도도 가능한가? mobile
검색어 샘플
31. 31
Ⅳ. GeoEXT
사용자 정의 좌표계
목적
• 비표준 좌표계인 UTMK 좌표계를 사용해 보자!
좌표계 정보 검색
• http://spatialreference.org/ref/?search=korea
• SR-ORG:7165: UTMK 선택
GeoServer용 정보 입력
• SpatialReferences.org UTMK화면에서 GeoServer 선택
• 좌표계 정보 복사
• data_dir/user_projections/epsg.properties 파일 오픈
• 제일 하단에 좌표계 정보 붙여 넣고 저장
• GeoServer 재기동
PostGIS용 정보 입력
• SpatialReferences.org UTMK화면에서 PostGIS 선택
• SQL 복사
• pgAdmin으로 PostgreSQL의 Administrator 데이터 베이스에 접속
• Query 창 띠우고 복사한 SQL 붙여 넣고 [F5]눌러 실행
테스트
• select ST_AsText(ST_Transform(ST_SetSRID(ST_LineFromText('LINESTRING(110 20, 150 50)'), 4326), 97165));
• http://demo.grida.kr:8088/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=WorldMap&s
tyles=&width=660&height=330&format=application/openlayers&srs=EPSG:7165&bbox=-852821.081908005,1
04613.151209606,2604316.19091138,3579939.07740313
33. 33
Web Browser
GIS Server
Ⅴ. Performance Tuning
Web Cache Logic
URI 요청
Browser Cache 확인
있는가?
유효기간?
Browser Cache Hit!
End
헤더에 If-Modified-Since:
LastModifiedTime 붙여 요청
컨텐츠 요청
304 not modified
새 버젂이 있는가?
컨텐츠 생산
(GeoServer)
GWC에 있는가?
컨텐츠 젂송
컨텐츠 사용
No
Yes
Remain
Expire
No
Yes
0.1 ms
10 ms
50 ms
No
Yes
500 ms
34. 34
Ⅴ. Performance Tuning
Cache Time 설정
1. GeoServer Admin 화면 접속
2. 왼쪽 Data 항목 중 Layers 선택
3. WorldCountries Layer 선택
4. Publishing 탭 선택
5. Edit Layer 아래 Response Cache Headers 체크
6. Cache Time에 초단위로 컨텐츠 유효기간 604800 (7일) 입력. 60초 * 60분 *24시간 * 7일 = 604800
7. [Save] 눌러 완료
Cache Header 설정
1. GeoServer Admin 화면 접속
2. 왼쪽 Data 항목 중 Layer Preview 선택
3. demo:WorldCountries Layer의 OpenLayers 선택
4. 지도창이 뜨면 Http 헤더 분석도구로 Response 확인 (Chrome [F12], FireFox FireBug, IE HttpWatch)
5. Response Header 부분에 Expires, Cache-Control: max-age=604800 값이 추가되었음을 확인
6. 휠로 줌 인, 줌 아웃 반복 별로 빨라지지 않은 것 같다 ㅠㅠ
7. 지도 우상단의 옵션버튼 클릭
8. Tiling에서 Tiled 선택
9. 휠로 줌 인, 줌 아웃 반복 이번엔 확실히 빨라진 것이 보인다.
Cache Test
Cache가 되려면 Tiled로 호출하여야만 한다! http://wiki.osgeo.org/wiki/WMS_Tiling_Client_Recommendation
35. 35
Ⅴ. Performance Tuning
GeoWebCache
1. 왼쪽 Setting 항목 중 GeoWebCache 선택
2. WMS Integration 에서 Enable direct WMS integration에 체크 되어 있는지 확인
3. Data_dir/gwc 폴더에 보면 캐시가 이미지로 쌓이는 것을 확인 가능
GWC 홗성화
1. 상단의 GWC Home Page 선택
2. [F5] 를 눌러 최싞 현황으로 갱싞 (3초의 갭이 있음)
GWC 통계확인
1. 상단의 GWC Demos Page 선택
2. 캐시를 만들려는 레이어 혹은 레이어 그룹의 Seed this layer 선택
3. 캐시를 만들기 위해 사용할 쓰레드 수 선택
4. 없는 타일만 생산하도록 Seed- generate missing tiles 선택
5. Grid Set에서 사용할 좌표계 선택 (4326, 900913, 레이어 고유의 좌표계 지웎)
6. 사용할 이미지 형태 선택 (이 형태로 호출해야지만 캐시가 유효)
7. 캐시를 만들 Zoom start와 Zoom end를 선택(0은 젂지구 스케일, 한단 올라갈 때마다 2배 확대)
8. 캐시가 필요한 영역의 Bounding Box 입력 (입력 안하면 젂체 범위)
9. [Submit]을 눌러 작업 시작
캐시 미리 만들기
36. 36
Ⅴ. Performance Tuning
데이터 간략화
1. WFS에만 해당하는 기법임
2. 도형컬럼과 키컬럼만이 있도록 레이어를 구성하는 것이 좋다.
3. 지적 등의 자료에는 보통 수십 개의 컬럼이 존재
4. WFS등 XML로 데이터 가져올 때 컬럼수에 따른 부하가 더 커진다.
5. 도형과 키 필드만을 가져와 나머지 속성은 필요시 DB 에 조회하는 방식으로 개발하는 것 권정
컬럼 최소화
1. 도형에서 불필요하게 많은 점을 제거
2. 주로 더글라스푸커 간략화 알고리즘 사용
3. Quantum GIS에서 Vector Geometry Tools Simplify geometries 기능을 이용해 수행 가능
4. 디스플레이 축척에 맞는 정도로 간략화 해주는 것이 좋음
5. 확대되었을 때와 축소되었을 때 서로 다른 정도로 간략화된 레이어를 보여주면 더 효과적
도형 간략화
1. 한반도 젂체가 그려진 피처를 땅을 표현하기 위해 계속 켜놓는 경우 등에 매우 느려지는 현상 발생
2. 동단위의 지역을 보고 있을 때도 땅 색 표현을 위해 수십만개 점을 가진 한반도를 계속 그림
3. 길고 점이 많은 폴리라인의 경우도 동일 현상 발생
4. 객체들을 일정 크기로 썰어 주면 해결 가능
5. QGIS에서 Research Tools Vector grid로 그리드 만들어 Geoprocessing Tools Intersect
큰 도형 분할
