오픈소스GIS 프로그래밍

OpenLayers의 고급 기능 이해 및
실습
2014년 01월 22일
국토교통부 공간정보 거점대학
오픈 소스 GIS 심화 과정
(주)망고시스템
이한진 (jinifor@gmail.com)
목차
1. OpenLayers 개요 및 소개





OpenLayers 소개
OpenLayers API 구성도
개발환경 준비하기
Map Object





4. 컨트롤러 추가하기 (Controls)

레...
1. OpenLayers 개요 및 소개
OpenLayers 소개



웹 플랫폼에서 지도 데이터의 시각화와 조작을 편리하도록 하
는 오픈소스 기반의 자바스크립트 라이브러리

 플랫폼
 Web Browser



Google Maps, Bing Maps...
OpenLayers 소개
 OpenLayers History
2004년 여름
- OpenStreetMap 재단설립
(by Steve Coast)
2005년 2월 8일
- 구글지도 처음으로 발표
2006년 봄
- Met...
OpenLayers 소개


Protocol Interface

<OpenLayers can communicate through several protocols>
출처 : wikipedia

OpenLayers의 고급...
OpenLayers API 구성도

OpenLayers의 고급 기능 이해 및 실습

7

이한진(jinifor@gmail.com)
개발환경 준비하기

 라이브러리
▶ OpenLayers
▶

http://openlayers.org/download/ 에서 최신버전인 2.13.1 버전을 다운
로드 받는다.

Bootstsrap

▶
▶

디자인 요소...
개발환경 준비하기 - 데이터

 샘플데이터

•
•

•
•
•
•

OpenLayers의 고급 기능 이해 및 실습

kml, json
/data 디렉토리 내에 포함

타입 : shape
위치 : 서울지역
좌표체계 :...
개발환경 준비하기 - 환경설정
 GeoServer Workspace 명칭
• Name : seoul
• NamespaceURI : http://geoserver.org/seoul
• Default Workspace :...
개발환경 준비하기
 OpenLayers로 웹 애플리케이션을 만들기 위해 가장 먼저 해야할 일들은 다음과

같다.






OpenLayers 라이브러리 파일(Javascript), 테마 스타일(css) 파일 ...
Map Object
 Map
 {OpenLayers.Map} class를 중심으로 인터렉티브한 지도가 웹 브라우저를 통해 생성된다.
 resolution, scale, units 등 Properties를 설정할 수...
Map Object
 Constructor
var map = new OpenLayers.Map(div, options);
//div : html 문서내에 포함된 Element의 id, options에서도 설정 가능함
...
Map Object
Properties Name

Parameter Type

Comment

div
layers
cotrols
events
allOverlays

{DOMElement|String}
{Array(Ope...
Map Object
 Methods

set properties value

▶
▶

▶
▶
▶
▶
▶

setOptions, updateSize, setCenter

get properties value

getBy...
Map Object
 Example
//setOptions({options}) : Change the map options
map.setOptions( {displayProjection: 'EPSG:4326'} );
...
Map Object
 Example
//addControl({control}, {pixel}) : Add the passed over control to the map
var panZoomBar = new OpenLa...
Map Object
 Example
//pan(dx, dy, {options}) : Allows user to pan by a value of screen pixels
map.pan(50, 100);
map.pan(2...
2. 레이어 (Layer)
레이어의 종류
 Layer class hierarchy

OpenLayers의 고급 기능 이해 및 실습

20

이한진(jinifor@gmail.com)
레이어의 종류
 레이어의 종류를 크게 두가지로 나눌 수 있다.
▶ Raster (Image 데이터 처리)
▶ Vector (Feature 데이터 처리)

OpenLayers의 고급 기능 이해 및 실습

21

이한진(...
레이어의 종류
 레이어는 Base Layers와 Overlays의 두가지 형식으로 Map에

추가된다.

Base Layer는 Map의 기준이 된다.
Map에서 BaseLayer가 여러개 존재할 수 있지만 하나만 활성...
Layer Object
 Constructor
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.WMS(name, options);
//WMS...
Layer Object
 Properties
▶ name : {String}

▶ maxExtent | minExtent : {Float}

▶ opacity : {Float}

▶ maxResolution | min...
Layer Object
 Method
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶
▶

setName(String newName)
addOptions({newOptions}, Boolean rein...
Raster Layer – Google Map
 {OpenLayers.Layer.Google} class
 Google Maps API의 래퍼 코드로 구성되어 구글의 타일맵을
OpenLayers에서 사용할 수 있도록...
Raster Layer – Google Map
<!-- Include the Google Maps API -->
<script type="text/javascript" src="http://maps.google.com/...
Raster Layer – Google Map

<Satellite>

<Hybrid>

<Roadmap>

<Terrain>

OpenLayers의 고급 기능 이해 및 실습

28

이한진(jinifor@gmail.c...
Raster Layer – Bing Map
 {OpenLayers.Layer.Bing} class
 Bing Maps은 Microsoft에서 제









공하는 지도 서비스이다.
Google Maps와...
Raster Layer – Bing Map
<script type="text/javascript">
var apiKey = "YOUR API KEY";
var roadBing = new OpenLayers.Layer.B...
Raster Layer – OSM
 {OpenLayers.Layer.OSM} class
▶
▶

OpenStreetMap의 TileMap 서비스의 사용을 목적으로 만들어진 레이어로 Mapnik Tileset
의 til...
Raster Layer – OSM
//사이클지도 (Cycle Map)
var cycleOSM= new OpenLayers.Layer.OSM("OSM Cycle", [
"http://a.tile.opencyclemap.o...
Raster Layer – OSM

<Standard>

<Humanitarian>

<Cycle>

<Transport>

OpenLayers의 고급 기능 이해 및 실습

33

이한진(jinifor@gmail.com...
Raster Layer – WMS
 {OpenLayers.Layer.WMS} class
▶

▶
▶

WMS(Web Map Service)는 웹 지도 서버가 보유하고 있는 지도 이미지를 요청하거나 결과
를 받을 때에 ...
Raster Layer – WMS
<script type="text/javascript">
var map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projec...
Raster Layer – WMS

<WMS요청시 Map기본 좌표계
로 자동 좌표변환이 이루어짐>

<minScale 적용으로 레이어가
Disable된 모습>

OpenLayers의 고급 기능 이해 및 실습

36

이...
Vector Layer

 {OpenLayers.Layer.Vector} class
▶ Raster Layer가 이미지 형태로 형상정보를 표현해 준다면

Vector 데이터는 데이터의 속성 정보와 좌표를 포함하고 있
...
Vector Layer
 Web Feature Service - GetFeature Parameter

<WFS GetFeature 파라메터>

OpenLayers의 고급 기능 이해 및 실습

38

이한진(jinif...
Vector Format 유형별 파싱방법
 {OpenLayers.Format.GML} class
<script type="text/javascript">
var map = new OpenLayers.Map('map',...
Vector Format 유형별 파싱방법
 {OpenLayers.Format.KML} class
<script type="text/javascript">
var map = new OpenLayers.Map('map',...
Vector Format 유형별 파싱방법
 {OpenLayers.Format.KML} class
OpenLayers.Request.POST({
url: 'http://localhost:8080/geoserver/seo...
Vector Format 유형별 파싱방법
 {OpenLayers.Format.GeoJSON} class
<!-- FILE TYPE -->

<!-- WFS RESULT -->

<script type="text/jav...
Vector Format 유형별 파싱방법
 {OpenLayers.Format.WKT} class
<script type="text/javascript">
var map = new OpenLayers.Map('map')...
Vector Layer Strategy
 {OpenLayers.Strategy} class
 벡터 레이어 내에 존재하고 있는 피쳐를 어떤식으로 지도에 표현

할 것인지를 결정하는 전략으로 줌 레벨, 화면 범위(Ext...
Vector Layer Strategy
 {OpenLayers.Strategy.BBOX} class
 WFS Protocol에 BBOX Strategy를 사용하면 WFS요청문에

BBOX(Spatial Filter)...
Vector Layer Strategy
 {OpenLayers.Strategy.Fixed} class
 한번 요청이 끝나면 새로운 데이터를 요청하지 않는다.

 {OpenLayers.Strategy.Referesh...
Vector Layer Strategy

<BBOX Strategy 전략 적
용>

<Cluster, Fixed 전략 적용>

OpenLayers의 고급 기능 이해 및 실습

47

이한진(jinifor@gmail.co...
Filter 사용법
 {OpenLayers.Filter} class
 공간 및 속성을 조회할 때 기준에 만족하는 피쳐를 선택할 수 있다.
 비교연산, 논리연산, 공간연산, 함수 등의 조건문을 생성할 수 있

다.
...
Filter 사용법
 {OpenLayers.Filter.Comparison} class
 속성 데이터의 연산을 처리하기 위한 필터를 생성

 {OpenLayers.Filter.Spatial} class
 공간 데...
Filter 사용법

<연산자 종류>

OpenLayers의 고급 기능 이해 및 실습

50

이한진(jinifor@gmail.com)
Filter 사용법
<script type="text/javascript">
var filter1_0_0 = new OpenLayers.Format.Filter({version: "1.0.0"});
var filter1...
Filter 사용법
<script type="text/javascript">
//속성데이터 연산 필터 생성
var equalFilter = new OpenLayers.Filter.Comparison({
type: Ope...
Filter 사용법

<WMS, WFS 레이어에 조건필터가 적용된 모습>
//WMS 레이어의 mergeNewParams 함수를 이용하면 요청 파라메터를 동적으로 변경할 수 있다. 다음은 CQL_FILTER 사용의 예이다...
2장 실습예제
 {OpenLayers.Filter} class를 사용하여 다음 조

건에 맞는 지역을 찾아 보세요.

 요청방법 : WFS GetFeature
 레이어명 : admin_sgg

 조건
1.
2.
...
3. 맵 스타일링 (Style)
스타일링
 포인트, 라인, 폴리곤 등의 벡터 피쳐의 스타일 작업과 SLD와 같은 표준안

을 지원하기 위한 기능을 제공한다.
 Style, StyleMap, Rule 등 스타일 설정과 관련된 클래스가 다수 제공된다....
Symbolizer
 {OpenLayers.Symbolizer.Polygon} Propeties
Properties
strokeColor
strokeOpacity
strokeWidth
strokeLinecap

Com...
Symbolizer
 {OpenLayers.Symbolizer.Point} Propeties
Properties
strokeColor
strokeOpacity
strokeWidth
strokeLinecap

Comme...
Symbolizer
 {OpenLayers.Symbolizer.Text} Propeties
Properties

Comment

label

{String} The text for the label.

fontFami...
Symbolizer
 Example – style Properties
<script type="text/javascript">
//레이어 선언시 style 프로퍼티로 추가
var wfsRiver = new
OpenLa...
Style, StyleMap
 Example - {OpenLayers.Style} class
<script type="text/javascript">
var defaultStyle = new OpenLayers.Sty...
4. 컨트롤러 추가하기 (Controls)
Controls
 {OpenLayers.Control} class
▶ 컨트롤러는 사용자와 지도간의 상호작용을 위한 도구이며 OpenLayers

를 개발함에 있어 어쩌면 가장 일반적이면서 중요한 요소라고 할 수 있다....
컨트롤러 추가/삭제
 Controls 추가
//Map Object 생성시
var map = new OpenLayers.Map("map", {
controls: [ CONTROL1, CONTROL2, CONTROL3 ]...
컨트롤러 스타일 변경
 스타일 변경
Control 각각의 기본 스타일이 있는데 그 스타일의 적용을 위해
OpenLayers/theme/default/style.css 파일을 페이지 내에 링크하여 사용하고
있다.
▶ 사...
컨트롤러 종류와 사용방법
 Example – Zoom, ZoomPanel, PanZoom, PanZoomBar
/**

map.addControl(new OpenLayers.Control.PanZoomBar({

* ...
컨트롤러 종류와 사용방법
 Example – Navigation, LayerSwitcher, MousePosition, OverviewMap
/**
* 드래그. 더블클릭, 마우스 휠을 이용한 컨트롤
*/
map.add...
컨트롤러 종류와 사용방법
 Example – Scale, ScaleLine, Graticule, Permalink, Attribution
/**
* 지도 축척 보기
*/
map.addControl( new OpenLa...
컨트롤러 종류와 사용방법

<LayerSwitcher>
<PanZoomBar>
<OverviewMap>
<Attribution>
<Permalink>

<ScaleLine>
<Scale>
<MousePosition>

...
컨트롤러 종류와 사용방법
 Example – EditingToolbar
<div id="tool-edit" class="olControlEditingToolbar"></div>
<script type="text/jav...
컨트롤러 종류와 사용방법
 Example – Custom Toolbar(Drawing Feature, Modify Feature)
앞서 보았던 {OpenLayers.Control.EditingToolbar} class...
컨트롤러 종류와 사용방법
 Example – Custom Toolbar(Drawing Feature, Modify Feature)
<style type="text/css">
.olControlEditingToolbar...
컨트롤러 종류와 사용방법
 Example – Custom Toolbar(Drawing Feature, Modify Feature)
<script type="text/javascript">

/**

/**
* 1. 도...
컨트롤러 종류와 사용방법
 Example – Custom Toolbar(Drawing Feature, Modify Feature)
/**

displayClass: 'olControlDrawFeaturePoint', ...
컨트롤러 종류와 사용방법
 Example – Custom Toolbar(Drawing Feature, Modify Feature)
/**
* 8. 피쳐를 수정할 때 어떤 형식으로 수정을 할 것인지 결정한다. - RES...
컨트롤러 종류와 사용방법
 Example – NavigationHistory
<style type="text/css">
.olControlNavigationHistory {
float: left; margin: 5px...
컨트롤러 종류와 사용방법
 Example – Geolocate
▶ {OpenLayers.Control.Geolocate} class는 사용

<button type="button" class="btn btn-defau...
5. 이벤트의 종류와 사용방법
(Events)
이벤트
 이벤트를 관리하고 조작하는 방법은 모든 언어에서 아주 중요한 개념이다.
 웹 브라우져(자바스크립트) 내부에도 이런 이벤트를 가지고 있어 페이지가

처음 로드될 때, 클릭, 마우스 오버/아웃 할 때 이벤트 핸...
이벤트의 종류

<BROWSER_EVENTS>

OpenLayers의 고급 기능 이해 및 실습

<Map, Layer, Control 이벤트 종류>

80

이한진(jinifor@gmail.com)
이벤트 리스너 사용방법
 이벤트 선언/활성화

 eventListeners / events.on / events.register
//객체 생성시 eventListeners Properties를 통해 등록할 수 있다....
이벤트 리스너 사용방법
 이벤트 삭제/비활성화

 events.un / events.unregister
// unregister a single listener for the "loadstart" event
even...
이벤트 리스너 사용방법
 example
<div id="result_1" class="well col-xs-6"></div>
<div id="result_2" class="well col-xs-6"></div>
<sc...
이벤트 리스너 사용방법
var result2Div = document.getElementById("result_2");
wfsSgg.events.register('featureadded', null, function(e...
6. WFS-T (Editing)
WFS-T
 소스 데이터베이스에 피쳐를 추가하거나 편집(수정, 삭제) 기

능을 처리하기 위해 WFS 서비스로 WFS-T(Transactional
Web Feature Service)를 사용한다.
 WFS Trans...
WFS-T 요청 환경구축
 OpenLayers 설정
▶ 편집할 벡터레이어 설정
편집하고자 하는 벡터 레이어의 벡터 전략에 Save 전략을 추가한다. 주의할 점이
BBOX전략을 사용하게 되면 트랜젝션 요청문에 BBOX가...
WFS-T 요청문
 <Insert> 요청문
<?xml version="1.0" encoding="UTF-8"?>
<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs"
se...
WFS-T 요청문
 <Update> 요청문
<?xml version="1.0" encoding="UTF-8"?>
<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs"
se...
WFS-T 요청문
 <Delete> 요청문
<?xml version="1.0" encoding="UTF-8"?>
<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs"
se...
6장 실습예제
 벡터 레이어의 피쳐를 새로 추가하고 편집하는

방법을 앞서 알아봤는데요. 이번에는 피쳐를 삭
제한 후 WFS Transaction DELETE문을 통해
피쳐를 삭제하세요.

 OpenLayers.Co...
7. Projections
Projection - OpenLayers.Projection
Map 초기 설정시 기본 좌표계를 지정하는데 사용하고자 하는 Vector 데이터
의 좌표계가 기본 좌표계와 다를 경우 지도에 제대로 표현될 수 없다. 이에
...
PROJ4JS - 소개

<Proj4js 관련 사이트>

Proj4js는 C언어 기반의 PROJ.4와 CCTCPF를 JavaScript로 포팅한 프로젝트
로 MetaCRS 그룹의 오픈소스 프로젝트이며 MIT Licens...
PROJ4JS – Custom Projection
 Proj4js Library 추가하기
 OpenLayers가 기본으로 지원하는 좌표변환이 가능한 좌표계

(EPSG:900913, EPSG:4326 등) 외 다른 ...
PROJ4JS – Custom Projection
 좌표계 정의
 사용하고자 하는 좌표계 정보를 찾아 직접 정의한다.
 spatialreference.org 에서 EPSG 코드별로 좌표정보를 정리하여 여러가

지 ...
PROJ4JS – Custom Projection
 자주 사용하는 좌표계는 다운로드 받

아 /proj4js-1.1.0/lib/defs/ 디렉토리에
넣어두면 좌표계를 새롭게 정의할 필
요가 없다.

<기본 지원 좌표계...
PROJ4JS – Custom Projection
<script type="text/javascript">
vectorLayer.events.register("featureselected", null,
function(...
8. 기타
OpenLayers 3 – 인터렉티브 컨트롤러

<Animation>

<Geolocation>

<Drag-Rotate and Zoom>

<Export Map>

OpenLayers의 고급 기능 이해 및 실습

10...
OpenLayers 3 – 인터렉티브 컨트롤러

<Modify Features>

<Fullscreen>

<Preload>

<ZoomSlider Control>

OpenLayers의 고급 기능 이해 및 실습

10...
유용한 사이트
OpenLayers

1.





2.





3.


4.


5.


6.
7.
8.



http://www.openlayers.org
API : http://dev.ope...
함께 성장하는 새로운 방법,
오픈 소스 소프트웨어!!

감사합니다
Q&A

OpenLayers의 고급 기능 이해 및 실습

이한진(jinifor@gmail.com)
Upcoming SlideShare
Loading in...5
×

공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습

8,670

Published on

OpenLayers의 고급 기능 이해 및 실습

국토교통부 공간정보 거점대학
오픈 소스 GIS 심화 과정
2014년 01월 22일

(주)망고시스템 이한진 (jinifor@gmail.com)

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,670
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of " 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습"

  1. 1. 오픈소스GIS 프로그래밍 OpenLayers의 고급 기능 이해 및 실습 2014년 01월 22일 국토교통부 공간정보 거점대학 오픈 소스 GIS 심화 과정 (주)망고시스템 이한진 (jinifor@gmail.com)
  2. 2. 목차 1. OpenLayers 개요 및 소개     OpenLayers 소개 OpenLayers API 구성도 개발환경 준비하기 Map Object    4. 컨트롤러 추가하기 (Controls) 레이어의 종류 Layer Object Raster Layers    5. 이벤트의 종류와 사용방법 (Events) 2. 레이어 (Layer)          이벤트 종류 이벤트 리스너 사용방법   WFS Transaction Editing   OpenLayers.Projection PROJ4JS   유용한 사이트 OpenLayers3 (OL3JS) 6. WFS-T (Editing) Google, Bing, OSM, WMS Vector Layers Format 유형별 파싱방법 WFS, GML, KML, GeoJSON, WKT Vector Layer Strategy 7. Projection Comparison, FeatureId, Function, Logical, Spatial 8. 기타 Filter 사용법 3. 맵 스타일링 (Style)   컨트롤러 추가/삭제 컨트롤러 스타일 변경 컨트롤러 종류와 사용방법 Symbolizer Style, StyleMap OpenLayers의 고급 기능 이해 및 실습 2 이한진(jinifor@gmail.com)
  3. 3. 1. OpenLayers 개요 및 소개
  4. 4. OpenLayers 소개  웹 플랫폼에서 지도 데이터의 시각화와 조작을 편리하도록 하 는 오픈소스 기반의 자바스크립트 라이브러리  플랫폼  Web Browser  Google Maps, Bing Maps 등의 상용 지도와 OpenStreetMap 과 같은 오픈 데이터 지도 사용이 가능하도록 라이브러리 제공  언어  Javascript  지도서버로의 접근을 OGC표준에 의해 요청하고 지도서버와는 독립적으로 동작  다수의 샘플 예제를 통해 기능을 학습할 수 있음 OpenLayers의 고급 기능 이해 및 실습 4  라이센스  FreeBSD (2-clause BSD License)  최신버전  OpenLayers-2.13.1 (ol3js v3.0.0-beta.1) 이한진(jinifor@gmail.com)
  5. 5. OpenLayers 소개  OpenLayers History 2004년 여름 - OpenStreetMap 재단설립 (by Steve Coast) 2005년 2월 8일 - 구글지도 처음으로 발표 2006년 봄 - MetaCarta 사내 그룹에 의해 OpenLayers Release 1.0 발표 2006 6월 27일 - Release 1.0 2006년 8월 25일 - Release/2.0 2006년 11월 15일 - Release/2.2 3.0.0-alpha.1 - 2013년 4월 2007년 2월 21일 - Release/2.3 r3.0.0-alpha.2 - 2013년 7월 2007년 5월 29, - Release/2.4 r3.0.0-alpha.3 - 2013년 7월 2007년 10월 9, - Release/2.5 r3.0.0-alpha.4 - 2013년 8월 2007년 11월 - OpenLayers is an Open Source Geospatial Foundation project v3.0.0-beta.1 - 2013년 10월 2006년 10월 2일 - Release/2.1 2006년 11월 10일 - The Slippy Map OpenLayers의 고급 기능 이해 및 실습 5 이한진(jinifor@gmail.com)
  6. 6. OpenLayers 소개  Protocol Interface <OpenLayers can communicate through several protocols> 출처 : wikipedia OpenLayers의 고급 기능 이해 및 실습 6 이한진(jinifor@gmail.com)
  7. 7. OpenLayers API 구성도 OpenLayers의 고급 기능 이해 및 실습 7 이한진(jinifor@gmail.com)
  8. 8. 개발환경 준비하기  라이브러리 ▶ OpenLayers ▶ http://openlayers.org/download/ 에서 최신버전인 2.13.1 버전을 다운 로드 받는다. Bootstsrap ▶ ▶ 디자인 요소를 추가하기 위한 CSS 프레임워크인 Bootstrap을 http://getbootstrap.com/ 에서 다운로드 받는다. OpenLayers의 고급 기능 이해 및 실습 8 이한진(jinifor@gmail.com)
  9. 9. 개발환경 준비하기 - 데이터  샘플데이터 • • • • • • OpenLayers의 고급 기능 이해 및 실습 kml, json /data 디렉토리 내에 포함 타입 : shape 위치 : 서울지역 좌표체계 : EPSG:2097 유형 : 포인트, 라인, 폴리곤 9 이한진(jinifor@gmail.com)
  10. 10. 개발환경 준비하기 - 환경설정  GeoServer Workspace 명칭 • Name : seoul • NamespaceURI : http://geoserver.org/seoul • Default Workspace : 체크  실사용데이터 • admin_sid • admin_sgg • admin_emd • river • stores • building OpenLayers의 고급 기능 이해 및 실습 10 이한진(jinifor@gmail.com)
  11. 11. 개발환경 준비하기  OpenLayers로 웹 애플리케이션을 만들기 위해 가장 먼저 해야할 일들은 다음과 같다.     OpenLayers 라이브러리 파일(Javascript), 테마 스타일(css) 파일 삽입하기 HTML문서 내에 지도가 생성될 <div> Element 생성 {OpenLayers.Map} class로 Map Object 생성 {OpenLayers.Layer} class로 Layer 생성 <html> <head> <link rel="stylesheet" href="http://www.openlayers.org/dev/theme/default/style.css" type="text/css"> <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> <style type="text/css"> #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <script type="text/javascript"> var map = new OpenLayers.Map("map"); map.addLayer(new OpenLayers.Layer.OSM("OSM")); map.zoomToMaxExtent(); </script> </body> </html> OpenLayers의 고급 기능 이해 및 실습 11 이한진(jinifor@gmail.com)
  12. 12. Map Object  Map  {OpenLayers.Map} class를 중심으로 인터렉티브한 지도가 웹 브라우저를 통해 생성된다.  resolution, scale, units 등 Properties를 설정할 수 있다.  Map은 하나 이상의 Layers로 구성된다.  지도를 조작하기 위한 Controls의 추가와 이벤트 발생과 처리를 담당하는 Events도 추가할 수 있다. <Map diagram> OpenLayers의 고급 기능 이해 및 실습 12 이한진(jinifor@gmail.com)
  13. 13. Map Object  Constructor var map = new OpenLayers.Map(div, options); //div : html 문서내에 포함된 Element의 id, options에서도 설정 가능함 //options : object with non-default properties  Properties var map = new OpenLayers.Map("map", { projection: "EPSG:2097", units: "m", maxExtent: new OpenLayers.Bounds(179101.76,436263.76,216151.24,466550.41), maxResolution: "auto", numZoomLevels: 16 }); OpenLayers의 고급 기능 이해 및 실습 13 이한진(jinifor@gmail.com)
  14. 14. Map Object Properties Name Parameter Type Comment div layers cotrols events allOverlays {DOMElement|String} {Array(OpenLayers.Layer)} projection {String} Set in the map options to specify the default projection for layers added to this map. Default is “EPSG:4326” displayProjection {OpenLayers.Projection} Requires proj4js support for projections other than EPSG:4326 or EPSG:900913/EPSG:3857. units tileSize resolutions maxResolution minResolution maxScale minScale {String} {OpenLayers.Size} {Array(Float)} {Float} {Float} {Float} {Float} maxExtent {OpenLayers.Bounds|Array} If provided as an array, the array should consist of four values (left, bottom, right, top) minExtent restrictedExtent numZoomLevels theme {OpenLayers.Bounds|Array} {OpenLayers.Bounds|Array} {Integer} {Integer} The minimum extent for the map Limit map navigation to this extent where possible Number of zoom levels for the map Relative path to a CSS file from which to load theme styles fallThrough {Boolean} Should OpenLayers allow events on the map to fall through to other elements on the page, or should it swallow them panMethod zoomMethod {Function} {Function} The Easing function to be used for tweening The Easing function to be used for tweening {OpenLayers.Events} {Boolean} The element that contains the map (or an id for that element). Ordered list of layers in the map. List of controls associated with the map. An events object than Allow the map to function with “overlays” only The map units. Possible values are 'degrees' (or 'dd'), 'm', 'ft', 'km', 'mi', 'inches' Set in the map options to override the default tile size for this map A list of map resolutions (map units per pixel) in descending order. Required if you are not displaying the whole world on a tile with the maxsize http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.Properties OpenLayers의 고급 기능 이해 및 실습 14 이한진(jinifor@gmail.com)
  15. 15. Map Object  Methods set properties value ▶ ▶ ▶ ▶ ▶ ▶ ▶ setOptions, updateSize, setCenter get properties value getBy, getTileSize, getSize, getUnits, getScale, getCenter, getProjection, getProjectionObject, getMaxResolution, getResolution getMaxExtent, getExtent, getZoom, getMinZoom, getNumZoomLevels, getZoomForExtent, getZoom ForResolution getViewPortPxFromLonLat, getLonLatFromPixel, getPixelFromLonLat, getViewPortPxFromLayerPx, getLayerPxFromViewPortPx, getLayerPxFromLonLat layers ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ getLayersBy, getLayersByName, getLayersByClass, getLayer addLayer, addLayers, removeLayer getNumLayers, getLayerIndex, setLayerIndex, raiseLayer, setBaseLayer, controls addControl, addControls, removeControl getControl, getControlsBy, getControlsByClass zoom pan, panTo, zoomTo, zoomIn, zoomOut, zoomToExtent, zoomToScale etc addPopup, removePopup http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.Functions OpenLayers의 고급 기능 이해 및 실습 15 이한진(jinifor@gmail.com)
  16. 16. Map Object  Example //setOptions({options}) : Change the map options map.setOptions( {displayProjection: 'EPSG:4326'} ); //setCenter({lonlat}, zoom, dragging, forceZoomChange) : Set the map center map.setCenter( new OpenLayers.LonLat(90.0, 180.0), 5); //getBy(array, property, match) : Get property and a match item map.getBy("layers", "name", "Vector Layer"); //return OpenLayers.Layer.Vector map.getBy("controls", "CLASS_NAME", "OpenLayers.Control.LayerSwitcher"); //return OpenLayers.Control.LayerSwitcher //getUnits() : The current units of the map map.getUnits(); //return 'degree' //addLayer({layer}) : add layer map.addLayer(new OpenLayers.Layer.OSM()); //addLayers({Array(layer)}) : add layers map.addLayers([layer1, layer2, layer3]); //removeLayer({layer}, setNewBaseLayer) : removes a layer from the map map.removeLayer( map.getBy("layers", "name", "Vector Layer")[0] ); OpenLayers의 고급 기능 이해 및 실습 16 이한진(jinifor@gmail.com)
  17. 17. Map Object  Example //addControl({control}, {pixel}) : Add the passed over control to the map var panZoomBar = new OpenLayers.Control.PanZoomBar(); var pixel = new OpenLayers.Pixel(50,50); map.addControl(panZoomBar, pixel); //addControls([{control}], [{pixel}] ) var navi = new OpenLayers.Control.Navigation(); var scaleLine = new OpenLayers.Control.ScaleLine(); var mousePosition = new OpenLayers.Control.MousePosition({numDigits: 2}); map.addControls([navi, scaleLine, mousePosition, new OpenLayers.Control.OverviewMap()]); //removeControl({control}) : Remove a control from the map map.removeControl(scaleLine); map.removeControl(new OpenLayers.Control.MousePosition()); //getControlsBy(property, match) : Get a list of controls with properties matching the given criteria map.getControlsBy("numDigits", "2"); //getControlsByClass(match) : Get a list of controls of a given class (CLASS_NAME) map.getControlsByClass("OpenLayers.Control.MousePosition"); OpenLayers의 고급 기능 이해 및 실습 17 이한진(jinifor@gmail.com)
  18. 18. Map Object  Example //pan(dx, dy, {options}) : Allows user to pan by a value of screen pixels map.pan(50, 100); map.pan(200, 0, {animate: true, dragging: false}); //panTo({lonlat}) : Allows user to pan to a new lonlat map.panTo(new OpenLayers.LonLat(14263486.62, 4387131.12)); //zoomTo(zoom, {pixel}) : Zoom to a specific zoom level map.zoomTo(7); map.zoomTo(7, new OpenLayers.Pixel(100,100)); //zoomIn map.zoomIn(); //zoomOut map.zoomOut(); //zoomToExtent({bounds|Array}, closet) : Zoom to the passed in bounds, recenter map.zoomToExtent(new OpenLayers.Bounds(-18094317.64, 2104625.70, -16944704.73, 2593822.68)); map.zoomToExtent([-362005.76590825,508764.86019534,4236445.8550878,2465552.7840235]); OpenLayers의 고급 기능 이해 및 실습 18 이한진(jinifor@gmail.com)
  19. 19. 2. 레이어 (Layer)
  20. 20. 레이어의 종류  Layer class hierarchy OpenLayers의 고급 기능 이해 및 실습 20 이한진(jinifor@gmail.com)
  21. 21. 레이어의 종류  레이어의 종류를 크게 두가지로 나눌 수 있다. ▶ Raster (Image 데이터 처리) ▶ Vector (Feature 데이터 처리) OpenLayers의 고급 기능 이해 및 실습 21 이한진(jinifor@gmail.com)
  22. 22. 레이어의 종류  레이어는 Base Layers와 Overlays의 두가지 형식으로 Map에 추가된다. Base Layer는 Map의 기준이 된다. Map에서 BaseLayer가 여러개 존재할 수 있지만 하나만 활성화 할 수 있 다. ▶ Overlays는 여러개 추가 및 활성화가 가능하다. ▶ {OpenLayers.Layer} class를 선언할 때 isBaseLayer Properties로 baseLayer 사용 유무를 선택할 수 있다. ▶ {OpenLayers.Map} class의 allOverLayers Properties로 모든 레이어를 Overlays로 설정할 수 있다. ▶ ▶ OpenLayers의 고급 기능 이해 및 실습 22 이한진(jinifor@gmail.com)
  23. 23. Layer Object  Constructor var map = new OpenLayers.Map("map"); var layer = new OpenLayers.Layer.WMS(name, options); //WMS, WFS, Google, Grid, Bing, TMS, WMTS, MapServer, Markers ... //name : The layer name //options : Hashtable of extra options to tag onto the layer map.addLayer(layer); <OpenLayers 레이어 종류> OpenLayers의 고급 기능 이해 및 실습 23 이한진(jinifor@gmail.com)
  24. 24. Layer Object  Properties ▶ name : {String} ▶ maxExtent | minExtent : {Float} ▶ opacity : {Float} ▶ maxResolution | minResolution : ▶ events : {OpenLayers.Events} ▶ isBaseLayer : {Boolean} ▶ ▶ displayInLayerSwitcher : ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ {Boolean} visibility : {Boolean} attribution : {String} eventListeners : {Object} projection : {Array} unit : {String} scales : {Array} resolutions : {Array} OpenLayers의 고급 기능 이해 및 실습 ▶ ▶ 24 {Float} numZoomLevels : {Integer} minScale | maxScale : {Float} displayOutsideMaxExtent : {Boolean} wrapDateLine : {Boolean} 이한진(jinifor@gmail.com)
  25. 25. Layer Object  Method ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ ▶ setName(String newName) addOptions({newOptions}, Boolean reinitialize) onMapResize() redraw() removeMap({OpenLayers.Map} map) getImageSize({OpenLayers.Bounds} bounds) setTileSize({OpenLayers.Size} size) getVisibility() setVisibility({Boolean} visibility) display({Boolean} display) calculateInRange() setIsBaseLayer({Boolean} isBaseLayer) getResolution() getExtent() getZoomForExtent({OpenLayers.Bounds} extent, {Boolean} closest) getResolutionForZoom({Float} zoom) getZoomForResolution({Float} resolution, {Boolean} closest) getLonLatFromViewPortPx({OpenLayers.Pixel} viewPortPx) getViewPortPxFromLonLat({Float} opacity) OpenLayers의 고급 기능 이해 및 실습 25 이한진(jinifor@gmail.com)
  26. 26. Raster Layer – Google Map  {OpenLayers.Layer.Google} class  Google Maps API의 래퍼 코드로 구성되어 구글의 타일맵을 OpenLayers에서 사용할 수 있도록 한다.  Google Maps 이미지 서비스를 무료로 사용할 수 있지만 요청 제 한이 있고 상용으로 사용할 경우 별도의 라이센스 비용을 지불해 야 한다.  기본 좌표계는 EPSG:900913(EPSG:3857) 이다.  좌표변환이 안되기 때문에 based Layer로 설정해야 한다.  구글맵에서 사용가능한 지도 유형은 다음과 같다.  Google Streets(google.maps.MapTypeId.ROADMAP) : 기본 로드맵(기 본)  Google Pysical(google.maps.MapTypeId.TERRAIN) : 지형 정보를 바 탕으로 실제 지도  Google Hybrid(google.maps.MapTypeId.HYBRID) : 일반뷰와 위성 보 기를 혼합한 지도  Google Satellite(google.maps.MapTypeId.SATELLITE) : Google 어스 위성 이미지 OpenLayers의 고급 기능 이해 및 실습 26 이한진(jinifor@gmail.com)
  27. 27. Raster Layer – Google Map <!-- Include the Google Maps API --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> <script type="text/javascript"> var hGoogle = new OpenLayers.Layer.Google("Google Satellite", { type: google.maps.MapTypeId.SATELLITE, sphericalMercator: true }); var sGoogle = new OpenLayers.Layer.Google("Google Hybrid", { type: google.maps.MapTypeId.HYBRID }); var rGoogle = new OpenLayers.Layer.Google("Google Roadmap", { type: google.maps.MapTypeId.ROADMAP }); var tGoogle = new OpenLayers.Layer.Google("Google Terrain", { type: google.maps.MapTypeId.TERRAIN }); map.addLayers([sGoogle, rGoogle, tGoogle, hGoogle]); map.setCenter(new OpenLayers.LonLat(0, 0), 2); </script> https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes OpenLayers의 고급 기능 이해 및 실습 27 이한진(jinifor@gmail.com)
  28. 28. Raster Layer – Google Map <Satellite> <Hybrid> <Roadmap> <Terrain> OpenLayers의 고급 기능 이해 및 실습 28 이한진(jinifor@gmail.com)
  29. 29. Raster Layer – Bing Map  {OpenLayers.Layer.Bing} class  Bing Maps은 Microsoft에서 제     공하는 지도 서비스이다. Google Maps와 마찬가지로 Bing Map을 Layer로 사용할 수 있다. Bing Maps을 사용하기 위해서 는 API Key가 필요한데 사용자 등록 후 발급받으면 된다. Bing class는 Google class 처럼 Wrapper 역할을 하지 않고 REST 서비스에 액서스 한다. 발급받은 API Key는 지도 요청 시 사용자 인증을 위해 사용된다. <Aerial With Labels> <Road>  http://msdn.microsoft.com/en-us/library/dd877180.aspx OpenLayers의 고급 기능 이해 및 실습 29 이한진(jinifor@gmail.com)
  30. 30. Raster Layer – Bing Map <script type="text/javascript"> var apiKey = "YOUR API KEY"; var roadBing = new OpenLayers.Layer.Bing({ key: apiKey, type: "Road", numZoomLevels: 10 }); var aerialBing = new OpenLayers.Layer.Bing({ key: apiKey, type: "Aerial" }); var hybridBing = new OpenLayers.Layer.Bing({ name: "Bing Aerial With Labels", key: apiKey, type: "AerialWithLabels" }); map.addLayers([roadBing, aerialBing, hybridBing]); </script> http://msdn.microsoft.com/en-us/library/ff701716.aspx OpenLayers의 고급 기능 이해 및 실습 30 이한진(jinifor@gmail.com)
  31. 31. Raster Layer – OSM  {OpenLayers.Layer.OSM} class ▶ ▶ OpenStreetMap의 TileMap 서비스의 사용을 목적으로 만들어진 레이어로 Mapnik Tileset 의 tile.openstreetmap.org 호스트가 기본으로 사용된다. 기본 제공하는 Layer 말고도 여러가지 스타일 옵션을 제공하는데 제공 URL을 확인후 사용 할 수 있다. var standardOSM1 = new OpenLayers.Layer.OSM(); var standardOSM2 = new OpenLayers.Layer.OSM("Standard OpenStreetMap"); var standardOSM3 = new OpenLayers.Layer.OSM("OpenStreetMap", [ "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png", "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png", "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png", ], { crossOriginKeyword: 'anonymous' } ); map.addLayers([standardOSM1, standardOSM2, standardOSM3]); OpenLayers의 고급 기능 이해 및 실습 31 이한진(jinifor@gmail.com)
  32. 32. Raster Layer – OSM //사이클지도 (Cycle Map) var cycleOSM= new OpenLayers.Layer.OSM("OSM Cycle", [ "http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png", "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png", "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png" ]); //교통지도 (Transport Map) var transportOSM = new OpenLayers.Layer.OSM("OSM Transport", [ "http://a.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png", "http://b.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png", "http://c.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png" ]); //인도주의(Humanitarian) var hotOSM= new OpenLayers.Layer.OSM("OSM Hot", [ "http://a.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png", "http://b.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png", "http://c.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png" ], { crossOriginKeyword: null}); map.addLayers([cycleOSM, transportOSM, hotOSM]); OpenLayers의 고급 기능 이해 및 실습 32 이한진(jinifor@gmail.com)
  33. 33. Raster Layer – OSM <Standard> <Humanitarian> <Cycle> <Transport> OpenLayers의 고급 기능 이해 및 실습 33 이한진(jinifor@gmail.com)
  34. 34. Raster Layer – WMS  {OpenLayers.Layer.WMS} class ▶ ▶ ▶ WMS(Web Map Service)는 웹 지도 서버가 보유하고 있는 지도 이미지를 요청하거나 결과 를 받을 때에 대한 표준 인터페이스를 제시해 놓은 OGC(Open Geospatial Consortium) Standard 이다. OpenLayers는 WMS 표준 인터페이스를 준수하여 개발되었기 때문에 손쉽게 WMS 서버에 대한 요청과 결과값을 HTTP 프로토콜을 이용하여 주고 받을 수 있다. http://WMS서버주소및포트/wms?{파라메터&파라메터} 형식으로 요청한다. <WMS GetMap 파라메터> OpenLayers의 고급 기능 이해 및 실습 34 이한진(jinifor@gmail.com)
  35. 35. Raster Layer – WMS <script type="text/javascript"> var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:900913") }); var osmLayer = new OpenLayers.Layer.OSM(); var tGoogle = new OpenLayers.Layer.Google("Google Terrain", { type: google.maps.MapTypeId.TERRAIN, sphericalMercator: true }); var wmsLayer = new OpenLayers.Layer.WMS("WMS Layer", "http://localhost:8080/geoserver/wms", { version: '1.3.0', WMS Parameter layers: 'admin_emd', transparent: 'true' }, { isBaseLayer: false, singleTile: false, opacity: 0.7, OpenLayers.Layers Options wrapDateLine: true, minScale: 450000 } ); map.addLayers([osmLayer, tGoogle, wmsLayer]); map.addControls([new OpenLayers.Control.LayerSwitcher()]); map.setCenter( new OpenLayers.LonLat(14134811.705557, 4519186.4226754), 10); </script> OpenLayers의 고급 기능 이해 및 실습 35 이한진(jinifor@gmail.com)
  36. 36. Raster Layer – WMS <WMS요청시 Map기본 좌표계 로 자동 좌표변환이 이루어짐> <minScale 적용으로 레이어가 Disable된 모습> OpenLayers의 고급 기능 이해 및 실습 36 이한진(jinifor@gmail.com)
  37. 37. Vector Layer  {OpenLayers.Layer.Vector} class ▶ Raster Layer가 이미지 형태로 형상정보를 표현해 준다면 Vector 데이터는 데이터의 속성 정보와 좌표를 포함하고 있 다. 이런 Vector 데이터를 레이어 형태로 표현할 수 있도록 도와주는 것이 바로 {OpenLayers.Layer.Vector} class 이다. ▶ Vector 데이터는 국가/도시의 경계, 도로, 철도, 강, 산, 건물 등으로 존재하며 Geometry 형상에 대한 자세한 속성정보를 가지고 있다. ▶ Vector Layer로 사용될 수 있는 데이터 타입에는 GML, GeoJSON, KML, WKT 등 다수가 존재하며 이런 데이터의 속성정보의 일부를 필터링하여 조회할 수 있다. ▶ Point, Line, Polygon과 같은 Gometry Feature 형태로 존재하 며 하나의 레이어에 하나의 Geometry 타입만 존재할 수 있다. OpenLayers의 고급 기능 이해 및 실습 37 이한진(jinifor@gmail.com)
  38. 38. Vector Layer  Web Feature Service - GetFeature Parameter <WFS GetFeature 파라메터> OpenLayers의 고급 기능 이해 및 실습 38 이한진(jinifor@gmail.com)
  39. 39. Vector Format 유형별 파싱방법  {OpenLayers.Format.GML} class <script type="text/javascript"> var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:900913") }); var rGoogle = new OpenLayers.Layer.Google("Google Maps"); var vectorLayer = new OpenLayers.Layer.Vector('WFS River', { strategies: [new OpenLayers.Strategy.BBOX()], protocol: new OpenLayers.Protocol.WFS({ url: 'http://localhost:8080/geoserver/seoul/wfs', featureType: 'river', featureNS: 'http://geoserver.org/seoul', srsName: 'EPSG:900913', version: '1.1.0' }), visibility: true }); map.addLayers([rGoogle, vectorLayer]); </script> map.setCenter( new OpenLayers.LonLat(14134811.705557, 4519186.4226754), 10); OpenLayers의 고급 기능 이해 및 실습 39 이한진(jinifor@gmail.com)
  40. 40. Vector Format 유형별 파싱방법  {OpenLayers.Format.KML} class <script type="text/javascript"> var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:4326") }); var hGoogle = new OpenLayers.Layer.Google("Google Hybrid", { type: google.maps.MapTypeId.HYBRID }); map.addLayer(hGoogle); map.addControls([new OpenLayers.Control.LayerSwitcher()]); map.setCenter( new OpenLayers.LonLat(14134811.705557, 4519186.4226754), 10); </script> var kmlRiver = new OpenLayers.Layer.Vector('KML River', { protocol: new OpenLayers.Protocol.HTTP({ url: './data/river.kml', format: new OpenLayers.Format.KML() }), strategies: [new OpenLayers.Strategy.Fixed()] }); map.addLayer(kmlRiver); OpenLayers의 고급 기능 이해 및 실습 40 이한진(jinifor@gmail.com)
  41. 41. Vector Format 유형별 파싱방법  {OpenLayers.Format.KML} class OpenLayers.Request.POST({ url: 'http://localhost:8080/geoserver/seoul/wfs', async: true, params: { typename: 'seoul:stores', service: 'WFS', version: '1.1.0', request: 'GetFeature', srsName: 'EPSG:900913', outputformat: 'KML' }, success: function(res) { if (res.readyState == 4) { var kml= new OpenLayers.Format.KML({ WFS Parameter extractStyles: true, extractAttributes: true }); KML Parser var kmlFeatures = kml.read(res.responseText); var kmlStores = new OpenLayers.Layer.Vector("KML Stores"); map.addLayer(kmlStores); 좌표 변환 EPSG:4326 -> EPSG:900913 var prjSource = new OpenLayers.Projection("EPSG:4326"); var prjDest = new OpenLayers.Projection("EPSG:900913"); for (var i=0; i<kmlFeatures.length; i++) { point = new OpenLayers.Geometry.Point(kmlFeatures[i].geometry.x, kmlFeatures[i].geometry.y); kmlFeatures[i].geometry = point.transform(prjSource, prjDest); }; kmlStores.addFeatures(kmlFeatures); } }, failure: function() { alert('실패'); } }); OpenLayers의 고급 기능 이해 및 실습 41 이한진(jinifor@gmail.com)
  42. 42. Vector Format 유형별 파싱방법  {OpenLayers.Format.GeoJSON} class <!-- FILE TYPE --> <!-- WFS RESULT --> <script type="text/javascript"> <script type="text/javascript"> var jsonRiver = new OpenLayers.Layer.Vector( var jsonRiver = new OpenLayers.Layer.Vector( 'WFS JSON River', { 'WFS JSON River', { protocol: new OpenLayers.Protocol.HTTP({ strategies: [new OpenLayers.Strategy.BBOX()], url: './data/river_900913.json', protocol: new OpenLayers.Protocol.WFS.v1_1_0({ format: new OpenLayers.Format.GeoJSON() url: 'http://localhost:8080/geoserver/seoul/wfs', }), featureType: 'river', strategies: [new OpenLayers.Strategy.Fixed()], featureNS: 'http://geoserver.org/seoul', isBaseLayer: true featurePrefix: 'seoul', }); geometryName: 'the_geom', map.addLayer(jsonRiver); srsName: 'EPSG:900913', </script> outputFormat: 'json' }), isBaseLayer: true }); map.addLayer(jsonRiver); </script> OpenLayers의 고급 기능 이해 및 실습 42 이한진(jinifor@gmail.com)
  43. 43. Vector Format 유형별 파싱방법  {OpenLayers.Format.WKT} class <script type="text/javascript"> var map = new OpenLayers.Map('map'); var osmLayer = new OpenLayers.Layer.OSM(); map.addLayer(osmLayer); map.addControls([new OpenLayers.Control.LayerSwitcher()]); map.setCenter(new OpenLayers.LonLat(14139240.275883, 4518230.959822), 15); var vectorLayer = new OpenLayers.Layer.Vector("WKT Vector Layer"); map.addLayer(vectorLayer); var wkt900913 = "POLYGON((14139541.77347457 4518847.25469576,14139548.11556872 4518796.304606,14139551.22131932 4518742.4035003,14139553.66030798 4518889.90295451 ...<중략>...))"; var feature = new OpenLayers.Format.WKT().read(wkt900913); vectorLayer.addFeatures([feature]); </script> OpenLayers의 고급 기능 이해 및 실습 43 이한진(jinifor@gmail.com)
  44. 44. Vector Layer Strategy  {OpenLayers.Strategy} class  벡터 레이어 내에 존재하고 있는 피쳐를 어떤식으로 지도에 표현 할 것인지를 결정하는 전략으로 줌 레벨, 화면 범위(Extent) 등의 변화에 따라 Feature들이 표현되는 방식이 변하게 된다.  종류로는 BBOX, Cluster, Filter, Fixed, Paging, Refresh, Save가 있으며 전략들은 혼합하여 사용될 수 있다. <Strategy 종류> OpenLayers의 고급 기능 이해 및 실습 44 이한진(jinifor@gmail.com)
  45. 45. Vector Layer Strategy  {OpenLayers.Strategy.BBOX} class  WFS Protocol에 BBOX Strategy를 사용하면 WFS요청문에 BBOX(Spatial Filter)가 자동으로 추가되어 서버에 요청을 한다.  줌 레벨이 변경될 경우 이전 영역보다 작다면 서버에는 재요청 하지 않 는다.  HTTP Protocol로 url경로로 요청할 경우 bbox 파라메터를 전달하는데, 처리할 수 있는 방법이 없기 때문에 BBOX가 적용되지 않는다.  {OpenLayers.Strategy.Cluster} class  벡터 피쳐들의 거리의 유사성에 따라 피처들을 군집화 하는데 포인트 피쳐뿐 아니라 라인, 폴리곤도 포인트 형태로 변형되어 보여준다.  Properties  distance : Pixel distance between features that should be considered a single cluster OpenLayers의 고급 기능 이해 및 실습 45 이한진(jinifor@gmail.com)
  46. 46. Vector Layer Strategy  {OpenLayers.Strategy.Fixed} class  한번 요청이 끝나면 새로운 데이터를 요청하지 않는다.  {OpenLayers.Strategy.Referesh} class  설정한 시간에 따라 새로운 데이터를 자동으로 갱신한다.  Properties force: Force a refresh on the layer. Default is false.  interval: Auto-refresh. Default is 0.   {OpenLayers.Strategy.Filter} class  Properties  filter: {OpenLayers.Filter} class  {OpenLayers.Strategy.Paging} class OpenLayers의 고급 기능 이해 및 실습 46 이한진(jinifor@gmail.com)
  47. 47. Vector Layer Strategy <BBOX Strategy 전략 적 용> <Cluster, Fixed 전략 적용> OpenLayers의 고급 기능 이해 및 실습 47 이한진(jinifor@gmail.com)
  48. 48. Filter 사용법  {OpenLayers.Filter} class  공간 및 속성을 조회할 때 기준에 만족하는 피쳐를 선택할 수 있다.  비교연산, 논리연산, 공간연산, 함수 등의 조건문을 생성할 수 있 다.  OGC Filter Encoding 형식을 기반으로 한다. <Filter의 종류> OpenLayers의 고급 기능 이해 및 실습 48 이한진(jinifor@gmail.com)
  49. 49. Filter 사용법  {OpenLayers.Filter.Comparison} class  속성 데이터의 연산을 처리하기 위한 필터를 생성  {OpenLayers.Filter.Spatial} class  공간 데이터의 연산을 처리할 때 사용되는 필터를 생성  {OpenLayers.Filter.Logical} class  논리연산자인 AND, OR, NOT을 사용하여 속성 연산 또는 공간 연산 등 을 조합하여 하나의 필터를 생성  {OpenLayers.Filter.FeatureId} class  {OpenLayers.Filter.Function} class OpenLayers의 고급 기능 이해 및 실습 49 이한진(jinifor@gmail.com)
  50. 50. Filter 사용법 <연산자 종류> OpenLayers의 고급 기능 이해 및 실습 50 이한진(jinifor@gmail.com)
  51. 51. Filter 사용법 <script type="text/javascript"> var filter1_0_0 = new OpenLayers.Format.Filter({version: "1.0.0"}); var filter1_1_0 = new OpenLayers.Format.Filter({version: "1.1.0"}); var xml = new OpenLayers.Format.XML(); var filter = new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.EQUAL_TO, property: 'SGG_NM', value: '중구' }); var filter100str = xml.write(filter1_0_0.write(filter)); var filter110str = xml.write(filter1_1_0.write(filter)); </script> filter100str 결과 : "<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>SGG_NM</ogc:PropertyName><ogc:Li teral>중구</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>" filter110str 결과 : "<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo matchCase="true"><ogc:PropertyName>SGG_NM</ogc:PropertyName><ogc:Literal>중구 </ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>" OpenLayers의 고급 기능 이해 및 실습 51 이한진(jinifor@gmail.com)
  52. 52. Filter 사용법 <script type="text/javascript"> //속성데이터 연산 필터 생성 var equalFilter = new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO, property: 'POP2007', value: '500000' }); //공간데이터 연산 필터 생성 var spatialFilter = new OpenLayers.Filter.Spatial({ type: OpenLayers.Filter.Spatial.INTERSECTS, properties: 'the_geom', value: new OpenLayers.Geometry.Point(195491.82240, 440635.70820) }); //논리연산자 필터를 사용하여 속성/공간 필터를 조합한 필터 생성 var logicalFilter = new OpenLayers.Filter.Logical({ type: '&&' filters: [ equalsFilter, spatialFilter ] }); </script> OpenLayers의 고급 기능 이해 및 실습 52 이한진(jinifor@gmail.com)
  53. 53. Filter 사용법 <WMS, WFS 레이어에 조건필터가 적용된 모습> //WMS 레이어의 mergeNewParams 함수를 이용하면 요청 파라메터를 동적으로 변경할 수 있다. 다음은 CQL_FILTER 사용의 예이다. wmsEmd.mergeNewParams({ CQL_FILTER: "EMD_CD LIKE '%112%'", transparent: false }); OpenLayers의 고급 기능 이해 및 실습 53 이한진(jinifor@gmail.com)
  54. 54. 2장 실습예제  {OpenLayers.Filter} class를 사용하여 다음 조 건에 맞는 지역을 찾아 보세요.  요청방법 : WFS GetFeature  레이어명 : admin_sgg  조건 1. 2. 3. 2007년 인구(pop2007)가 20,000 이상 또는 2008년 인구 (pop2008)가 30,000 이상. 동이름(emd_nm)에 '마'가 포함되어 있음. 면적(shape_area)이 1,000,000 미만. openlayers_209_ex.html OpenLayers의 고급 기능 이해 및 실습 54 이한진(jinifor@gmail.com)
  55. 55. 3. 맵 스타일링 (Style)
  56. 56. 스타일링  포인트, 라인, 폴리곤 등의 벡터 피쳐의 스타일 작업과 SLD와 같은 표준안 을 지원하기 위한 기능을 제공한다.  Style, StyleMap, Rule 등 스타일 설정과 관련된 클래스가 다수 제공된다.  {OpenLayers.Symbolizer} class  벡터 심볼의 종류에 따라 스타일을 설정할 수 있도록 제공하는 클래스이다.  심볼의 종류에는 Line, Point, Polygon, Raster, Text가 있어 각 유형별로 스타일을 생 성할 수 있도록 프로퍼티를 제공한다.  {OpenLayers.Style} class  Symbolizer의 해시 프로퍼티를 전달하여 Style 클래스가 생성된다.  하나의 스타일을 지정할 수 있다.  {OpenLayers.StyleMap} class  Style 클래스를 통해 생성된 여러개의 개체를 StyleMap의 생성자에 사용될 수 있다.  StyleMap에는 네가지 종류("default", "temporary", "select", "delete" )의 타입이 있어 상태에 따라 각각의 작업에 따라 스타일을 적용할 수 있다. OpenLayers의 고급 기능 이해 및 실습 56 이한진(jinifor@gmail.com)
  57. 57. Symbolizer  {OpenLayers.Symbolizer.Polygon} Propeties Properties strokeColor strokeOpacity strokeWidth strokeLinecap Comment {String} Default is #ee9900. Color for line stroke. This is a RGB hex value (e.g. "#ff0000"). {Number} Default is 1. Stroke opacity (0-1). {Number} Default is 1. Pixel stroke width. {String} Default is round. Stroke cap type ("butt", "round", or "square"). strokeDashstyle {String} Default is solid. Stroke dash style according to the SLD spec. Note that the OpenLayers values for strokeDashstyle ("dot", "dash", "dashdot", "longdash", "longdashdot", or "solid") will not work in SLD, but most SLD patterns will render correctly in OpenLayers. fillColor fillOpacity {String} Default is #ee9900. RGB hex fill color (e.g. "#ff0000" for red). {Number} Default is 0.4. Fill opacity (0-1).  {OpenLayers.Symbolizer.Line} Propeties Properties strokeColor strokeOpacity strokeWidth strokeLinecap Comment {String} Default is #ee9900. Color for line stroke. This is a RGB hex value (e.g. "#ff0000"). {Number} Default is 1. Stroke opacity (0-1). {Number} Default is 1. Pixel stroke width. {String} Default is round. Stroke cap type ("butt", "round", or "square"). strokeDashstyle {String} Default is solid. Stroke dash style according to the SLD spec. Note that the OpenLayers values for strokeDashstyle ("dot", "dash", "dashdot", "longdash", "longdashdot", or "solid") will not work in SLD, but most SLD patterns will render correctly in OpenLayers. OpenLayers의 고급 기능 이해 및 실습 57 이한진(jinifor@gmail.com)
  58. 58. Symbolizer  {OpenLayers.Symbolizer.Point} Propeties Properties strokeColor strokeOpacity strokeWidth strokeLinecap Comment {String} Default is #ee9900. Color for line stroke. This is a RGB hex value (e.g. "#ff0000"). {Number} Default is 1. Stroke opacity (0-1). {Number} Default is 1. Pixel stroke width. {String} Default is round. Stroke cap type ("butt", "round", or "square"). strokeDashstyle {String} Default is solid. Stroke dash style according to the SLD spec. Note that the OpenLayers values for strokeDashstyle ("dot", "dash", "dashdot", "longdash", "longdashdot", or "solid") will not work in SLD, but most SLD patterns will render correctly in OpenLayers. fillColor fillOpacity pointRadius externalGraphic graphicWidth graphicHeight graphicOpacity graphicXOffset graphicYOffset rotation graphicName {String} Default is #ee9900. RGB hex fill color (e.g. "#ff0000" for red). {Number} Default is 0.4. Fill opacity (0-1). {Number} Default is 6. Pixel point radius. {String} Url to an external graphic that will be used for rendering points. {Number} Pixel width for sizing an external graphic. {Number} Pixel height for sizing an external graphic. {Number} Opacity (0-1) for an external graphic. {Number} Pixel offset along the positive x axis for displacing an external graphic. {Number} Pixel offset along the positive y axis for displacing an external graphic. {Number} The rotation of a graphic in the clockwise direction about its center point (or any point off center as specified by <graphicXOffset> and <graphicYOffset>). {String} Named graphic to use when rendering points. Supported values include "circle", "square", "star", "x", "cross", and "triangle". OpenLayers의 고급 기능 이해 및 실습 58 이한진(jinifor@gmail.com)
  59. 59. Symbolizer  {OpenLayers.Symbolizer.Text} Propeties Properties Comment label {String} The text for the label. fontFamily {String} The font family for the label. fontSize {String} The font size for the label. fontWeight {String} The font weight for the label. fontStyle {String} The font style for the label. <Symbolizer 종류> OpenLayers의 고급 기능 이해 및 실습 59 이한진(jinifor@gmail.com)
  60. 60. Symbolizer  Example – style Properties <script type="text/javascript"> //레이어 선언시 style 프로퍼티로 추가 var wfsRiver = new OpenLayers.Layer.Vector('WFS river', { strategies: [new OpenLayers.Strategy.BBOX()], //레이어 선언 후 style 변경 가능 var vstyle2 = { fillColor: '#9900ff', fillOpacity: 0.4, strokeColor: '#0099ff', strokeOpacity: 1, strokeWidth: 2, strokeLinecap: 'square', strokeDashstyle: 'dash' } protocol: new OpenLayers.Protocol.WFS({ ...... }), style: { fillColor: 'green', fillOpacity: .3, strokeColor: 'yellow', strokeOpacity: 0.5, strokeWidth: 2 } wfsRiver.style = vstyle2; </script> }); OpenLayers의 고급 기능 이해 및 실습 60 이한진(jinifor@gmail.com)
  61. 61. Style, StyleMap  Example - {OpenLayers.Style} class <script type="text/javascript"> var defaultStyle = new OpenLayers.Style({ fillColor: '#9900ff', fillOpacity: 0.4, strokeColor: '#0099ff', strokeOpacity: 1, strokeWidth: 2, strokeLinecap: 'square', strokeDashstyle: 'dash', pointRadius: 10 }); var selectStyle = new OpenLayers.Style({ pointRadius: 5, fillColor: '#ff3333', strokeColor: '#669933', strokeWidth: 4, pointRadius: 10 }); var temporaryStyle = new OpenLayers.Style({ fillColor: 'green', fillOpacity: .3, strokeColor: 'yellow', strokeOpacity: 0.5, strokeWidth: 2, pointRadius: 10 }); var editStyleMap = new OpenLayers.StyleMap({ "default": defaultStyle, "select": selectStyle, "temporary": temporaryStyle }); var editVector = new OpenLayers.Layer.Vector('Edit Vector', { styleMap: editStyleMap }); map.addLayer(editVector); var editVectorSelect = new OpenLayers.Control.SelectFeature(editVector, { hover: true }); map.addControl(editVectorSelect); editVectorSelect.activate(); </script> OpenLayers의 고급 기능 이해 및 실습 select default 61 temporary 이한진(jinifor@gmail.com)
  62. 62. 4. 컨트롤러 추가하기 (Controls)
  63. 63. Controls  {OpenLayers.Control} class ▶ 컨트롤러는 사용자와 지도간의 상호작용을 위한 도구이며 OpenLayers 를 개발함에 있어 어쩌면 가장 일반적이면서 중요한 요소라고 할 수 있다. ▶ 컨트롤러의 종류는 약 46가지 정도이며 그중에서 가장 많이 사용되고 유 용한 컨트롤러에 대해서 알아본다. <OpenLayers 컨트롤러 종류> OpenLayers의 고급 기능 이해 및 실습 63 이한진(jinifor@gmail.com)
  64. 64. 컨트롤러 추가/삭제  Controls 추가 //Map Object 생성시 var map = new OpenLayers.Map("map", { controls: [ CONTROL1, CONTROL2, CONTROL3 ] }); //하나씩 추가 map.addControl( new OpenLayers.Control.Zoom() ); //여러개 추가 map.addControls([ CONTROL1, CONTROL2, CONTROL3 ]);  Controls 삭제 //Control 변수 선언이 안되어 있을 때 getControlsByClass를 이용한 Object 찾기 map.removeControl( map.getControlsByClass("OpenLayers.Control.EditingToolbar")[0] ); OpenLayers의 고급 기능 이해 및 실습 64 이한진(jinifor@gmail.com)
  65. 65. 컨트롤러 스타일 변경  스타일 변경 Control 각각의 기본 스타일이 있는데 그 스타일의 적용을 위해 OpenLayers/theme/default/style.css 파일을 페이지 내에 링크하여 사용하고 있다. ▶ 사용자 임의로 스타일을 변경하기 위해 style.css 파일을 직접 수정할 수도 있 고 CSS를 Override하여 사용할 수 있다. ▶ 기본타입 컨트롤러명 .olControlLayerSwitcher { ... 스타일 내용 } <style.css 파일내 LayerSwitcher Control의 기본 스타일 내용 일부> OpenLayers의 고급 기능 이해 및 실습 ... <Control CSS 클래스명 네이밍 방법> 65 이한진(jinifor@gmail.com)
  66. 66. 컨트롤러 종류와 사용방법  Example – Zoom, ZoomPanel, PanZoom, PanZoomBar /** map.addControl(new OpenLayers.Control.PanZoomBar({ * 확대, 축소 버튼 컨트롤 zoomWorldIcon: true, */ panIcons: true map.addControl(new OpenLayers.Control.Zoom({ })); zoomInText: '+', zoomOutText: '−', /** })); * 키보드 버튼으로 지도의 확대, 축소, 위치이동 * - +/-, Page Up/Page Down/Home/End /** */ * 확대, 축소, 전체보기 버튼 컨트롤 map.addControl( new OpenLayers.Control.KeyboardDefaults() ); */ map.addControl(new OpenLayers.Control.ZoomPanel()); /** * 확대, 축소, 전체보기, 상하좌우 이동 버튼 컨트롤 */ map.addControl(new OpenLayers.Control.PanZoom()); /** * 확대, 축소, 전체보기, 상하좌우 이동 및 슬라이더 컨트롤 */ OpenLayers의 고급 기능 이해 및 실습 66 이한진(jinifor@gmail.com)
  67. 67. 컨트롤러 종류와 사용방법  Example – Navigation, LayerSwitcher, MousePosition, OverviewMap /** * 드래그. 더블클릭, 마우스 휠을 이용한 컨트롤 */ map.addControl( new OpenLayers.Control.Navigation() ); /** * 레이어 ON/OFF 변경이 가능한 컨트롤러 추가 - Base Layers, Overlays 구분이 가능 */ map.addControl( new OpenLayers.Control.LayerSwitcher({'ascending': true}) ); /** * 지도 위 마우스 포인트가 위치한 실제 좌표 정보를 조회 */ map.addControl( new OpenLayers.Control.MousePosition({ div: document.getElementById("result-mouseposition"), numDigits: 3, displayProjection: new OpenLayers.Projection("EPSG:4326"), prefix: '<a target="_blank" href="http://spatialreference.org/ref/epsg/4326/">EPSG:4326</a> : ' }) ); /** * 메인맵에서 확대된 위치정보를 제공하는 미니맵 생성 */ map.addControl( new OpenLayers.Control.OverviewMap({ size: new OpenLayers.Size(100,100), layers: [ map.layers[1].clone(),map.layers[0].clone() ], maximized: true }) ); OpenLayers의 고급 기능 이해 및 실습 67 이한진(jinifor@gmail.com)
  68. 68. 컨트롤러 종류와 사용방법  Example – Scale, ScaleLine, Graticule, Permalink, Attribution /** * 지도 축척 보기 */ map.addControl( new OpenLayers.Control.Scale(document.getElementById("result-scale") ) ); /** * 지도 축척선 생성 */ map.addControl( new OpenLayers.Control.ScaleLine() ); /** * 지도위에 경위도 격자선 생성 */ map.addControl( new OpenLayers.Control.Graticule() ); /** * 퍼머링크(Permalink) 생성 * - zoom, lat, lon, layers 파라메터 생성 */ map.addControl( new OpenLayers.Control.Permalink()); /** * 지도내에 레이어에 대한 정보를 표시 * - attribution option으로 레이어별로 설정이 가능함 */ map.addControl( new OpenLayers.Control.Attribution({ template: '- 데이터정보 : 서울시 시군구, 읍면동<br>- 좌표계정보 : Bassel 중부원점(EPSG:2097)' }) ); OpenLayers의 고급 기능 이해 및 실습 68 이한진(jinifor@gmail.com)
  69. 69. 컨트롤러 종류와 사용방법 <LayerSwitcher> <PanZoomBar> <OverviewMap> <Attribution> <Permalink> <ScaleLine> <Scale> <MousePosition> OpenLayers의 고급 기능 이해 및 실습 69 이한진(jinifor@gmail.com)
  70. 70. 컨트롤러 종류와 사용방법  Example – EditingToolbar <div id="tool-edit" class="olControlEditingToolbar"></div> <script type="text/javascript"> var editVector = new OpenLayers.Layer.Vector('Edit Vector'); map.addLayer(editVector); var editingToolbar = new OpenLayers.Control.EditingToolbar( editVector ); map.addControl( editingToolbar ); var editingToolbar2 = new OpenLayers.Control.EditingToolbar( editVector, { div: document.getElementById("tool-edit") } ); map.addControl( editingToolbar2 ); </script> OpenLayers의 고급 기능 이해 및 실습 70 이한진(jinifor@gmail.com)
  71. 71. 컨트롤러 종류와 사용방법  Example – Custom Toolbar(Drawing Feature, Modify Feature) 앞서 보았던 {OpenLayers.Control.EditingToolbar} class 추가하여 Polygon/Line/Point 그리 기, 이동 컨트롤을 추가했는데 하나의 컨트롤러에 네가지 기능이 포함되어 있기 때문에 간 단히 처리를 할 수 있었다.  이번에는 각각의 기능을 추가하는 방법과 컨트롤러별 옵션을 이용한 확장된 형태의 툴바를 만드는 방법에 대해서 알아본다.  OpenLayers의 고급 기능 이해 및 실습 71 이한진(jinifor@gmail.com)
  72. 72. 컨트롤러 종류와 사용방법  Example – Custom Toolbar(Drawing Feature, Modify Feature) <style type="text/css"> .olControlEditingToolbar .olControlModifyFeatureItemInactive { background-position: -1px -1px; } .olControlEditingToolbar .olControlModifyFeatureItemActive { background-position: -1px -24px; } </style> <div id="toolbox"> <ul class="list-inline"> <li><div id="tool-edit" class="olControlEditingToolbar"></div></li> <li>|</li> <li>Modify Mode :</li> <li> <select id="modifyFeatureMode" class="form-control" style="width: 150px;" onchange="modifyFeatureMode(this.value)"> <option value="1">RESHAPE</option> <option value="2">RESIZE</option> <option value="4">ROTATE</option> <option value="8">DRAG</option> </select> </li> <li>|</li> <li> Snapping Enable : <input type="checkbox" checked="checked" onchange="snapMode(this)" /> </li> </ul> </div> OpenLayers의 고급 기능 이해 및 실습 72 이한진(jinifor@gmail.com)
  73. 73. 컨트롤러 종류와 사용방법  Example – Custom Toolbar(Drawing Feature, Modify Feature) <script type="text/javascript"> /** /** * 1. 도형이 그려질 벡터 레이어를 생성한다. * 3. 컨트롤러들이 들어갈 수 있는 Panel을 지도 외부 영역에 선언한다. */ */ var panel = new OpenLayers.Control.Panel({ var editVector = new OpenLayers.Layer.Vector('Edit Vector'); div: document.getElementById("tool-edit"), displayClass: 'olControlEditingToolbar' map.addLayer(editVector); }); /** /** * 2. 벡터 피쳐끼리 스내핑이 되도록 Snapping 컨트롤을 추 가하고 활성화 한다. 이때 타겟이 될 벡터레이어를 옵션에 넣어준다. * 4. 피쳐를 수정할 수 있도록 ModifyFeature 컨트롤을 추가 한다. */ */ var ctrModifyFeature = new OpenLayers.Control.ModifyFeature( var snap = new OpenLayers.Control.Snapping({ layer: editVector, editVector, { targets: [wfsRiver, editVector], displayClass: 'olControlModifyFeature', greedy: false title: '수정' }); } snap.activate(); OpenLayers의 고급 기능 이해 및 실습 ); 73 이한진(jinifor@gmail.com)
  74. 74. 컨트롤러 종류와 사용방법  Example – Custom Toolbar(Drawing Feature, Modify Feature) /** displayClass: 'olControlDrawFeaturePoint', title: '포인트 추가‘ * 5. 도형을 그릴때 사용하는 DrawFeature Control을 추가한다. * Polygon, Path(Line), Point 세가지 타입의 Handler를 추가한다. * } ); Options : {vectorLayer, handler, {DrawFeature properties}} */ /** var ctrDrawFeaturePolygon = new OpenLayers.Control.DrawFeature( * 6. 패닝 할 수 있는 Navigation 컨트롤을 추가한다. editVector, OpenLayers.Handler.Polygon, */ { var ctrNavvigation = new OpenLayers.Control.Navigation({ displayClass: 'olControlDrawFeaturePolygon', title: '이동‘ title: '폴리곤 추가', }); handlerOptions: {holeModifier: 'altKey'} } /** ); * 7. 위에서 선언한 컨트롤러를 패널 컨트롤러에 추가한다. var ctrDrawFeaturePath = new OpenLayers.Control.DrawFeature( */ editVector, OpenLayers.Handler.Path, panel.addControls([ ctrModifyFeature, { ctrDrawFeaturePolygon, ctrDrawFeaturePath, ctrDrawFeaturePoint, displayClass: 'olControlDrawFeaturePath', title: '라인 추가‘ ctrNavvigation } ); ]); var ctrDrawFeaturePoint = new OpenLayers.Control.DrawFeature( map.addControl( panel ); editVector, OpenLayers.Handler.Point, { OpenLayers의 고급 기능 이해 및 실습 74 이한진(jinifor@gmail.com)
  75. 75. 컨트롤러 종류와 사용방법  Example – Custom Toolbar(Drawing Feature, Modify Feature) /** * 8. 피쳐를 수정할 때 어떤 형식으로 수정을 할 것인지 결정한다. - RESHAPE : 1, RESIZE : 2, ROTATE : 4, DRAG : 8 */ function modifyFeatureMode(mode) { if (mode==1 || mode==2 || mode==4 || mode==8) { //map.getControlsByClass('OpenLayers.Control.ModifyFeature')[0]; ctrModifyFeature.deactivate(); ctrModifyFeature.mode = mode; ctrModifyFeature.activate(); } } /** * 9. 스내핑 사용여부를 결정한다. */ function snapMode(mode) { if (mode.checked) { snap.activate(); } else { snap.deactivate(); } } </script> OpenLayers의 고급 기능 이해 및 실습 75 이한진(jinifor@gmail.com)
  76. 76. 컨트롤러 종류와 사용방법  Example – NavigationHistory <style type="text/css"> .olControlNavigationHistory { float: left; margin: 5px; margin-left: 0px; cursor: pointer; } #tool-navhistory { right: 0px; height: 32px; width: 70px; } </style> <div id="tool-edit" class="olControlEditingToolbar"></div> <script type="text/javascript"> var navHistory = new OpenLayers.Control.NavigationHistory({ previousOptions: {title: '이전보기'}, nextOptions: {title: '이후보기'} }); map.addControl( navHistory ); <한번 이상 위치 이동이 있을 때> var panelNaviHistory = new OpenLayers.Control.Panel({ div: document.getElementById("tool-navhistory") }); panelNaviHistory.addControls([ navHistory.next, navHistory.previous ]); map.addControl( panelNaviHistory ); </script> OpenLayers의 고급 기능 이해 및 실습 <위치 이동후 이전 화면으로 돌아갔을 때> 76 이한진(jinifor@gmail.com)
  77. 77. 컨트롤러 종류와 사용방법  Example – Geolocate ▶ {OpenLayers.Control.Geolocate} class는 사용 <button type="button" class="btn btn-default" onclick="geoLocate();">Locate </button> 하여 사용자의 위치정보를 확인하는 기능을 제 공하며 HTML5 geolocation API를 참고한 래퍼 클래스 이다. ▶ 개인정보를 침해할 수 있기 때문에 위치를 찾기 전에 사용자가 기능을 사용할지에 대한 여부를 먼저 물어본다. ▶ 데스크탑 환경의 웹 브라우저로는 크롬 v5, 파 이어폭스v3.5, 인터넷익스플로러 v9 등 이상버 전에서 지원한다. <script type="text/javascript"> var geolocVector = new OpenLayers.Layer.Vector('Geolocate Vector'); map.addLayer(geolocVector); var geolocate = new OpenLayers.Control.Geolocate({ bind: false, geolocationOptions: { enableHighAccuracy: false, maximumAge: 0, timeout: 7000 } }); map.addControl(geolocate); geolocate.events.register('locationupdated', geolocate, function(evt) { geolocVector.removeAllFeatures(); geolocVector.addFeatures([ new OpenLayers.Feature.Vector( OpenLayers.Geometry.Polygon.createRegularPolygon( new OpenLayers.Geometry.Point(evt.point.x, evt.point.y), evt.position.coords.accuracy/2, 40, 0 ) ) ])’ map.zoomToExtent(geolocVector.getDataExtent()); }); function geoLocate() { geolocate.deactivate(); geolocate.activate(); } </script> <현재위치 이동 실행> OpenLayers의 고급 기능 이해 및 실습 77 이한진(jinifor@gmail.com)
  78. 78. 5. 이벤트의 종류와 사용방법 (Events)
  79. 79. 이벤트  이벤트를 관리하고 조작하는 방법은 모든 언어에서 아주 중요한 개념이다.  웹 브라우져(자바스크립트) 내부에도 이런 이벤트를 가지고 있어 페이지가 처음 로드될 때, 클릭, 마우스 오버/아웃 할 때 이벤트 핸들러가 반응하여 개발자가 지정한 동작을 행하게 된다.  OpenLayers에서는 {OpenLayers.Map}, {OpenLayers.Layer}, {OpenLayers.Control} 객체에 여러 종류의 이벤트를 내제하고 있는데 이것 을 구분하여 단순화 시켜 등록할 수 있도록 {OpenLayers.Events} class를 제공하기 때문에 필요한 이벤트를 등록하고 활성화/비활성화 할 수 있다.  약 16가지의 브라우져 이벤트 지원하여 기본 이벤트를 확장한 형태로 다른 이벤트가 생성된다. OpenLayers의 고급 기능 이해 및 실습 79 이한진(jinifor@gmail.com)
  80. 80. 이벤트의 종류 <BROWSER_EVENTS> OpenLayers의 고급 기능 이해 및 실습 <Map, Layer, Control 이벤트 종류> 80 이한진(jinifor@gmail.com)
  81. 81. 이벤트 리스너 사용방법  이벤트 선언/활성화  eventListeners / events.on / events.register //객체 생성시 eventListeners Properties를 통해 등록할 수 있다. eventListeners: { "loadstart": loadStartListener, "loadend": loadEndListener } // 하나 또는 여러개의 이벤트 리스너를 등록할 수 있다. events.on({ "loadstart": loadStartListener, "loadend": loadEndListener, scope: object }); //하나씩 이벤트를 등록할 때는 events.register를 사용한다. events.register("loadstart", object, loadStartListener); events.register("loadend", object, loadEndListener); OpenLayers의 고급 기능 이해 및 실습 81 이한진(jinifor@gmail.com)
  82. 82. 이벤트 리스너 사용방법  이벤트 삭제/비활성화  events.un / events.unregister // unregister a single listener for the "loadstart" event events.un({"loadstart": loadStartListener}); // this is equivalent to the following events.unregister("loadstart", undefined, loadStartListener); // unregister multiple listeners with the same `this` object events.un({ "loadstart": loadStartListener, "loadend": loadEndListener, scope: object }); // this is equivalent to the following events.unregister("loadstart", object, loadStartListener); events.unregister("loadend", object, loadEndListener); OpenLayers의 고급 기능 이해 및 실습 82 이한진(jinifor@gmail.com)
  83. 83. 이벤트 리스너 사용방법  example <div id="result_1" class="well col-xs-6"></div> <div id="result_2" class="well col-xs-6"></div> <script type="text/javascript"> var result1Div = document.getElementById("result_1"); var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:900913"), units: 'm', tileSize: new OpenLayers.Size(512, 512), eventListeners: { 'move': function(e) { result1Div.innerHTML = 'map.eventListeners : move'; }, 'moveend': function(e) { result1Div.innerHTML = 'map.eventListeners : moveend'; } } }); map.events.on({ 'updatesize': function(e) { result1Div.innerHTML = 'map.events.on : updatesize'; }, 'zoomend': function(e) { result1Div.innerHTML = 'map.events.on : zoomend'; } }); OpenLayers의 고급 기능 이해 및 실습 83 이한진(jinifor@gmail.com)
  84. 84. 이벤트 리스너 사용방법 var result2Div = document.getElementById("result_2"); wfsSgg.events.register('featureadded', null, function(e) { result2Div.innerHTML += '- ' + e.feature.fid + ' Area : ' + e.feature.geometry.getArea() + '<br>' }); wfsSgg.events.register('visibilitychanged', null, function(e) { alert('register : visibilitychanged'); }); </script> <Map 이동, 사이즈 변경, 피쳐추가시 발생되는 이벤트 테스트> OpenLayers의 고급 기능 이해 및 실습 84 이한진(jinifor@gmail.com)
  85. 85. 6. WFS-T (Editing)
  86. 86. WFS-T  소스 데이터베이스에 피쳐를 추가하거나 편집(수정, 삭제) 기 능을 처리하기 위해 WFS 서비스로 WFS-T(Transactional Web Feature Service)를 사용한다.  WFS Transaction에는 Insert, Update, Delete 3가지 형식이 있다.  OpenLayers에서는 벡터데이터의 추가와 편집을 위해 WFST 기능을 구현할 수 있는 인터페이스를 제공하는데 벡터 레이 어의 피쳐 상태에 따라 WFS Transaction 서비스 요청문을 간 단히 생성하여 실제 소스 데이터베이스에 적용될 수 있도록 지원한다. <WFS Operations> OpenLayers의 고급 기능 이해 및 실습 86 이한진(jinifor@gmail.com)
  87. 87. WFS-T 요청 환경구축  OpenLayers 설정 ▶ 편집할 벡터레이어 설정 편집하고자 하는 벡터 레이어의 벡터 전략에 Save 전략을 추가한다. 주의할 점이 BBOX전략을 사용하게 되면 트랜젝션 요청문에 BBOX가 포함되어 버리기 때문에 제대로된 결과 안된다. ▶ ▶ [new OpenLayers.Strategy.Fixed(), new OpenLayers.Strategy.Save()] WFS Protocol 요청시 다음의 프로퍼티를 정확히 명시한다. ▶ ▶ featureType, featureNS, featurePrefix, geometryName Poloygon 형식의 피쳐데이터를 WFS Protocol로 GetFeature할 때 geometryType을 멀티폴리곤으로 명시한다. ▶ ▶ geometryType: 'OpenLayers.Geometry.MultiPolygon‘ OpenLayers.Strategy.Save의 이벤트 핸들러의 종류는 다음과 같다. ▶ ▶ start, success, fail ▶ 편집완료 후 결과 저장 ▶ {OpenLayers.Strategy.Save}의 save() 함수를 이용하여 편집된 결과를 저장한다. ▶ 이때 저장이란 Insert, Update, Delete된 상태의 피쳐 정보를 OpenLayers에서 확인 한 후에 하나의 요청문으로 서버에 전달 후 Transaction된 결과를 다시 전달 받는다. OpenLayers의 고급 기능 이해 및 실습 87 이한진(jinifor@gmail.com)
  88. 88. WFS-T 요청문  <Insert> 요청문 <?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:seoul="http://geoserver.org/seoul"> <wfs:Insert> <seoul:building> <seoul:the_geom> <gml:MultiSurface xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:900913"> <gml:surfaceMember> <gml:Polygon> <gml:exterior> <gml:LinearRing> <gml:posList> ... ... </gml:posList> </gml:LinearRing> </gml:exterior> </gml:Polygon> </gml:surfaceMember> </gml:MultiSurface> </seoul:the_geom> </seoul:building> </wfs:Insert> </wfs:Transaction> OpenLayers의 고급 기능 이해 및 실습 88 이한진(jinifor@gmail.com)
  89. 89. WFS-T 요청문  <Update> 요청문 <?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <wfs:Update typeName="seoul:building" xmlns:seoul="http://geoserver.org/seoul"> <wfs:Property> <wfs:Name>the_geom</wfs:Name> <wfs:Value> <gml:MultiSurface xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:900913"> <gml:surfaceMember> <gml:Polygon> <gml:exterior> <gml:LinearRing> <gml:posList>... ...</gml:posList> </gml:LinearRing> </gml:exterior> </gml:Polygon> </gml:surfaceMember> </gml:MultiSurface> </wfs:Value> </wfs:Property> <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"> <ogc:FeatureId fid="building.24647" /> </ogc:Filter> </wfs:Update> </wfs:Transaction> OpenLayers의 고급 기능 이해 및 실습 이한진(jinifor@gmail.com)
  90. 90. WFS-T 요청문  <Delete> 요청문 <?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <wfs:Delete typeName="seoul:building" xmlns:seoul="http://geoserver.org/seoul"> <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"> <ogc:FeatureId fid="building.25537" /> </ogc:Filter> </wfs:Delete> </wfs:Transaction> OpenLayers의 고급 기능 이해 및 실습 90 이한진(jinifor@gmail.com)
  91. 91. 6장 실습예제  벡터 레이어의 피쳐를 새로 추가하고 편집하는 방법을 앞서 알아봤는데요. 이번에는 피쳐를 삭 제한 후 WFS Transaction DELETE문을 통해 피쳐를 삭제하세요.  OpenLayers.Control 내에 피쳐를 삭제하는 컨트롤러 가 있는지 확인합니다.  혹시 삭제하는 컨트롤러가 없다며 직접 컨트롤러를 추 가하여 실행하세요.  Geometry 필드가 아닌 다른 속성 필드의 데이 터값도 같이 추가하여 데이터를 저장, 수정하세 요. openlayers_601_ex.html OpenLayers의 고급 기능 이해 및 실습 91 이한진(jinifor@gmail.com)
  92. 92. 7. Projections
  93. 93. Projection - OpenLayers.Projection Map 초기 설정시 기본 좌표계를 지정하는데 사용하고자 하는 Vector 데이터 의 좌표계가 기본 좌표계와 다를 경우 지도에 제대로 표현될 수 없다. 이에 OpenLayers는 좌표계 변환을 위한 {OpenLayers.Projection} class를 제공한 다. OpenLayers에서 기본적으로 지원하는 SRS 코드는 EPSG:4326(WGS84), EPSG:900913(Spherical Mercator, EPSG:3857), CRS:84, EPSG:102113, EPSG:102100의 상호 변환만을 지원한다. var prjSource = new OpenLayers.Projection("EPSG:4326"); var prjDest = new OpenLayers.Projection("EPSG:900913"); var point = new OpenLayers.Geometry.Point (10,10); point.transform(prjSource, prjDest); OpenLayers.Projection.transform(point, prjSource, prjDest); OpenLayers의 고급 기능 이해 및 실습 93 이한진(jinifor@gmail.com)
  94. 94. PROJ4JS - 소개 <Proj4js 관련 사이트> Proj4js는 C언어 기반의 PROJ.4와 CCTCPF를 JavaScript로 포팅한 프로젝트 로 MetaCRS 그룹의 오픈소스 프로젝트이며 MIT License 를 따른다. Proj4js 1.3.1버전 이후 저장소가 Github로 변경이 되어 운영중이며 현재 2.1.0 버전까지 릴리즈 되었다. OpenLayers의 고급 기능 이해 및 실습 94 이한진(jinifor@gmail.com)
  95. 95. PROJ4JS – Custom Projection  Proj4js Library 추가하기  OpenLayers가 기본으로 지원하는 좌표변환이 가능한 좌표계 (EPSG:900913, EPSG:4326 등) 외 다른 좌표계 사용을 위해서는 Proj4js Library를 추가하여 사용한다. Proj4js의 버전은 1.1.0을 권장한다.  OSGEO 소스 저장소에 있는 파일을 링크하거나 라이브러리 파일을 직접 다운로드 받는다. (http://trac.osgeo.org/proj4js/wiki/Download) <script type="text/javascript" src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4jscompressed.js"></script> 또는, <script type="text/javascript" src="./proj4js-1.1.0/lib/proj4js.js"></script> OpenLayers의 고급 기능 이해 및 실습 95 이한진(jinifor@gmail.com)
  96. 96. PROJ4JS – Custom Projection  좌표계 정의  사용하고자 하는 좌표계 정보를 찾아 직접 정의한다.  spatialreference.org 에서 EPSG 코드별로 좌표정보를 정리하여 여러가 지 포맷 형태로 제공하는데 proj4js Format (JavaScript)을 선택한다. <script type="text/javascript" src="http://spatialreference.org/ref/epsg/2097/proj4js/"></script> <spatialreference.org 제공 좌표계 포맷> OpenLayers의 고급 기능 이해 및 실습 96 이한진(jinifor@gmail.com)
  97. 97. PROJ4JS – Custom Projection  자주 사용하는 좌표계는 다운로드 받 아 /proj4js-1.1.0/lib/defs/ 디렉토리에 넣어두면 좌표계를 새롭게 정의할 필 요가 없다. <기본 지원 좌표계(파일)>  동일한 타원체가 아닌 타 타원체간 좌표변환의 경우 오차가 존재하기 때 문에 towgs84 파라메터가 필요하다. 아래 예제처럼 좌표정보를 직접 선 언할 수 있다. <script type="text/javascript"> Proj4js.defs["EPSG:2097"] = "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs +towgs84=-146.43,507.89,681.46"; </script> OpenLayers의 고급 기능 이해 및 실습 97 이한진(jinifor@gmail.com)
  98. 98. PROJ4JS – Custom Projection <script type="text/javascript"> vectorLayer.events.register("featureselected", null, function(e) { var featureGeometry = e.feature.geometry; document.getElementById("result_1").innerHTML = "- " + map.projection.projCode + "<br><br>" + featureGeometry; <좌표계 선택> var epsgCode = document.getElementById("srsNames").value; var wktObj = new OpenLayers.Format.WKT().read(featureGeometry.toString ()); var transformGeometry = wktObj.geometry.transform( new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection(epsgCode) ); document.getElementById("result_2").innerHTML = "- " + epsgCode + "<br><br>" + transformGeometry; }); </script> OpenLayers의 고급 기능 이해 및 실습 <추가된 Feature의 좌표를 정의된 좌표계로 변환> 98 이한진(jinifor@gmail.com)
  99. 99. 8. 기타
  100. 100. OpenLayers 3 – 인터렉티브 컨트롤러 <Animation> <Geolocation> <Drag-Rotate and Zoom> <Export Map> OpenLayers의 고급 기능 이해 및 실습 100 이한진(jinifor@gmail.com)
  101. 101. OpenLayers 3 – 인터렉티브 컨트롤러 <Modify Features> <Fullscreen> <Preload> <ZoomSlider Control> OpenLayers의 고급 기능 이해 및 실습 101 이한진(jinifor@gmail.com)
  102. 102. 유용한 사이트 OpenLayers 1.     2.     3.  4.  5.  6. 7. 8.   http://www.openlayers.org API : http://dev.openlayers.org/apidocs/files/OpenLayers-js.html Document : http://docs.openlayers.org Sample : http://www.openlayers.org/dev/examples/ OpenLayers3 http://ol3js.org API : http://ol3js.org/en/master/apidoc/ Source : https://github.com/openlayers/ol3 Sample : http://ol3js.org/en/master/examples/ Bootstrap3 http://getbootstrap.com cdnjs - JS Library CDN http://cdnjs.com Spatial Reference : http://spatialreference.org 한국주요 좌표계 EPSG코드 및 PROJ4 인자 - http://osgeo.kr/17 Proj4js : http://trac.osgeo.org/proj4js/ Geolocation : https://developer.mozilla.org/ko/docs/WebAPI/Using_geolocation 커뮤니티 OSGeo 한국어 지부 : http://www.osgeo.kr OSGeo 한국어 지부 메일링 리스트 : http://groups.google.com/group/osgeo-kr OpenLayers의 고급 기능 이해 및 실습 102 이한진(jinifor@gmail.com)
  103. 103. 함께 성장하는 새로운 방법, 오픈 소스 소프트웨어!! 감사합니다 Q&A OpenLayers의 고급 기능 이해 및 실습 이한진(jinifor@gmail.com)

×