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. 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)
8. 개발환경 준비하기
라이브러리
▶ OpenLayers
▶
http://openlayers.org/download/ 에서 최신버전인 2.13.1 버전을 다운
로드 받는다.
Bootstsrap
▶
▶
디자인 요소를 추가하기 위한 CSS 프레임워크인 Bootstrap을
http://getbootstrap.com/ 에서 다운로드 받는다.
OpenLayers의 고급 기능 이해 및 실습
8
이한진(jinifor@gmail.com)
9. 개발환경 준비하기 - 데이터
샘플데이터
•
•
•
•
•
•
OpenLayers의 고급 기능 이해 및 실습
kml, json
/data 디렉토리 내에 포함
타입 : shape
위치 : 서울지역
좌표체계 : EPSG:2097
유형 : 포인트, 라인, 폴리곤
9
이한진(jinifor@gmail.com)
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. 개발환경 준비하기
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. Map Object
Map
{OpenLayers.Map} class를 중심으로 인터렉티브한 지도가 웹 브라우저를 통해 생성된다.
resolution, scale, units 등 Properties를 설정할 수 있다.
Map은 하나 이상의 Layers로 구성된다.
지도를 조작하기 위한 Controls의 추가와 이벤트 발생과 처리를 담당하는 Events도 추가할
수 있다.
<Map diagram>
OpenLayers의 고급 기능 이해 및 실습
12
이한진(jinifor@gmail.com)
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. 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)
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. 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. 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)
20. 레이어의 종류
Layer class hierarchy
OpenLayers의 고급 기능 이해 및 실습
20
이한진(jinifor@gmail.com)
21. 레이어의 종류
레이어의 종류를 크게 두가지로 나눌 수 있다.
▶ Raster (Image 데이터 처리)
▶ Vector (Feature 데이터 처리)
OpenLayers의 고급 기능 이해 및 실습
21
이한진(jinifor@gmail.com)
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. 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)
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. 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. Raster Layer – Google Map
<Satellite>
<Hybrid>
<Roadmap>
<Terrain>
OpenLayers의 고급 기능 이해 및 실습
28
이한진(jinifor@gmail.com)
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. 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. 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. 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. Raster Layer – OSM
<Standard>
<Humanitarian>
<Cycle>
<Transport>
OpenLayers의 고급 기능 이해 및 실습
33
이한진(jinifor@gmail.com)
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. 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. Raster Layer – WMS
<WMS요청시 Map기본 좌표계
로 자동 좌표변환이 이루어짐>
<minScale 적용으로 레이어가
Disable된 모습>
OpenLayers의 고급 기능 이해 및 실습
36
이한진(jinifor@gmail.com)
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. Vector Layer
Web Feature Service - GetFeature Parameter
<WFS GetFeature 파라메터>
OpenLayers의 고급 기능 이해 및 실습
38
이한진(jinifor@gmail.com)
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. 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. 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. 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. 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. Vector Layer Strategy
{OpenLayers.Strategy} class
벡터 레이어 내에 존재하고 있는 피쳐를 어떤식으로 지도에 표현
할 것인지를 결정하는 전략으로 줌 레벨, 화면 범위(Extent) 등의
변화에 따라 Feature들이 표현되는 방식이 변하게 된다.
종류로는 BBOX, Cluster, Filter, Fixed, Paging, Refresh, Save가
있으며 전략들은 혼합하여 사용될 수 있다.
<Strategy 종류>
OpenLayers의 고급 기능 이해 및 실습
44
이한진(jinifor@gmail.com)
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. 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. Vector Layer Strategy
<BBOX Strategy 전략 적
용>
<Cluster, Fixed 전략 적용>
OpenLayers의 고급 기능 이해 및 실습
47
이한진(jinifor@gmail.com)
48. Filter 사용법
{OpenLayers.Filter} class
공간 및 속성을 조회할 때 기준에 만족하는 피쳐를 선택할 수 있다.
비교연산, 논리연산, 공간연산, 함수 등의 조건문을 생성할 수 있
다.
OGC Filter Encoding 형식을 기반으로 한다.
<Filter의 종류>
OpenLayers의 고급 기능 이해 및 실습
48
이한진(jinifor@gmail.com)
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)
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. 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. Filter 사용법
<WMS, WFS 레이어에 조건필터가 적용된 모습>
//WMS 레이어의 mergeNewParams 함수를 이용하면 요청 파라메터를 동적으로 변경할 수 있다. 다음은 CQL_FILTER 사용의 예이다.
wmsEmd.mergeNewParams({
CQL_FILTER: "EMD_CD LIKE '%112%'",
transparent: false
});
OpenLayers의 고급 기능 이해 및 실습
53
이한진(jinifor@gmail.com)
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)
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. 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. 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. 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. 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. 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)
63. Controls
{OpenLayers.Control} class
▶ 컨트롤러는 사용자와 지도간의 상호작용을 위한 도구이며 OpenLayers
를 개발함에 있어 어쩌면 가장 일반적이면서 중요한 요소라고 할 수 있다.
▶ 컨트롤러의 종류는 약 46가지 정도이며 그중에서 가장 많이 사용되고 유
용한 컨트롤러에 대해서 알아본다.
<OpenLayers 컨트롤러 종류>
OpenLayers의 고급 기능 이해 및 실습
63
이한진(jinifor@gmail.com)
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. 컨트롤러 스타일 변경
스타일 변경
Control 각각의 기본 스타일이 있는데 그 스타일의 적용을 위해
OpenLayers/theme/default/style.css 파일을 페이지 내에 링크하여 사용하고
있다.
▶ 사용자 임의로 스타일을 변경하기 위해 style.css 파일을 직접 수정할 수도 있
고 CSS를 Override하여 사용할 수 있다.
▶
기본타입 컨트롤러명
.olControlLayerSwitcher {
...
스타일 내용
}
<style.css 파일내 LayerSwitcher Control의
기본 스타일 내용 일부>
OpenLayers의 고급 기능 이해 및 실습
...
<Control CSS 클래스명 네이밍 방법>
65
이한진(jinifor@gmail.com)
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. 컨트롤러 종류와 사용방법
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. 컨트롤러 종류와 사용방법
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)
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. 컨트롤러 종류와 사용방법
Example – Custom Toolbar(Drawing Feature, Modify Feature)
앞서 보았던 {OpenLayers.Control.EditingToolbar} class 추가하여 Polygon/Line/Point 그리
기, 이동 컨트롤을 추가했는데 하나의 컨트롤러에 네가지 기능이 포함되어 있기 때문에 간
단히 처리를 할 수 있었다.
이번에는 각각의 기능을 추가하는 방법과 컨트롤러별 옵션을 이용한 확장된 형태의 툴바를
만드는 방법에 대해서 알아본다.
OpenLayers의 고급 기능 이해 및 실습
71
이한진(jinifor@gmail.com)
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. 컨트롤러 종류와 사용방법
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. 컨트롤러 종류와 사용방법
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. 컨트롤러 종류와 사용방법
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. 컨트롤러 종류와 사용방법
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)
79. 이벤트
이벤트를 관리하고 조작하는 방법은 모든 언어에서 아주 중요한 개념이다.
웹 브라우져(자바스크립트) 내부에도 이런 이벤트를 가지고 있어 페이지가
처음 로드될 때, 클릭, 마우스 오버/아웃 할 때 이벤트 핸들러가 반응하여
개발자가 지정한 동작을 행하게 된다.
OpenLayers에서는 {OpenLayers.Map}, {OpenLayers.Layer},
{OpenLayers.Control} 객체에 여러 종류의 이벤트를 내제하고 있는데 이것
을 구분하여 단순화 시켜 등록할 수 있도록 {OpenLayers.Events} class를
제공하기 때문에 필요한 이벤트를 등록하고 활성화/비활성화 할 수 있다.
약 16가지의 브라우져 이벤트 지원하여 기본 이벤트를 확장한 형태로 다른
이벤트가 생성된다.
OpenLayers의 고급 기능 이해 및 실습
79
이한진(jinifor@gmail.com)
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. 이벤트 리스너 사용방법
이벤트 삭제/비활성화
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. 이벤트 리스너 사용방법
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. 이벤트 리스너 사용방법
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)
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. 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)
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. 6장 실습예제
벡터 레이어의 피쳐를 새로 추가하고 편집하는
방법을 앞서 알아봤는데요. 이번에는 피쳐를 삭
제한 후 WFS Transaction DELETE문을 통해
피쳐를 삭제하세요.
OpenLayers.Control 내에 피쳐를 삭제하는 컨트롤러
가 있는지 확인합니다.
혹시 삭제하는 컨트롤러가 없다며 직접 컨트롤러를 추
가하여 실행하세요.
Geometry 필드가 아닌 다른 속성 필드의 데이
터값도 같이 추가하여 데이터를 저장, 수정하세
요.
openlayers_601_ex.html
OpenLayers의 고급 기능 이해 및 실습
91
이한진(jinifor@gmail.com)
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. 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. 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. 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. 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. 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)