오픈소스GIS 개론 과정 - OpenLayers 기초

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

목차
1. OpenLayers 개요

5. 사용자 그리기

2. Map 기본 설정

1) 도형 그리기

3. Layer

2) 도형 선택, 삭제

1) WMS Layer

6. 속성정보 조회

2) Overlay Layer

7. Marker

3) Vector Layer – WFS Layer
4) Vector Layer – 기타

8. Popup
9. Google Map

4. Controls
1) LayerSwitcher, PanZoomBar,
MousePosition,
Navigation, ScaleLine
2) 확대,축소,이동,이전,이후
2

1. OpenLayers 개요
+ 웹 브라우저에서 지도 데이터를 표현하고 조작할 수 있는 자바스크립트 라이브러리.

+ Google Maps, Bing Maps, OSM 등 오픈 데이터 사용 가능하게 라이브러리 제공.
+ 지도서버로의 접근을 OGC표준에 의해 요청하므로 지도서버와 독립적으로 동작.
+ FreeBSD 라이센스. (2-clause BSD License)
• 하나의 응용 프로그램에 여러 지도를 중첩가능
• WMS, TMS, WMTS, Google, Bing, OpenStreetMap, ArcGIS와 연동 가능
• WFS, KML, GeoJSON, GeoRSS 등 벡터 레이어 지원

• 여러 자바 스크립트 툴킷과 결합가능(ExtJS, JQuery, DoJo등)
• 클라이언트 사이드에서 ReProjection 가능
• 다양한 웹 브라우저 지원(Internet Explorer, Crome, Firefox, Safari 등)
• 홈페이지 : http://www.openlayers.org/
3

활용사례

VWORLD - 오픈플랫폼
(http://map.vworld.kr/map/maps.do)

활용사례

기상청 지도기반 날씨서비스
(http://gis.kma.go.kr/COMIS4P/map/map.jsp)

활용사례

NSDI - 국가공간정보통합체계
(http://www.nsdi.go.kr/map/popMapSearch.do)

활용사례

KOPSS - 국토공간계획지원체계
(http://www.kopss.go.kr)

활용사례

보금자리주택
(http://portal.newplus.go.kr/newplus_gis/swf2/SubApp.html)

실습전 환경설정 및 확인사항
• Workspace 명칭
• Name : seoul
• NamespaceURI : http://geoserver.org/seoul
• Default Workspace : 체크
• 사용 데이터
• Vector Data
• seoul:admin_sid
• seoul:admin_sgg
• seoul:admin_emd
• seoul:river
• seoul:firestation
• seoul:policestation
• seoul:stores
• Raster Data
• seoul:landsat

9

실습전 환경설정 및 확인사항
• 브라우저 환경설정
• 웹 브라우저의 크로스 도메인 보안정책으로 인해 로컬파일 실행시에 서버측
에 전달을 보낼수가 없습니다.
• 이로 인해 실습예제가 제대로 동작하지 않을 수 있기 때문에 브라우저 보안
을 낮춰서 실습을 진행합니다.
• Chrome
• 실행 아이콘에 아래 옵션 추가
• --disable-web-security

10


컨트롤 영역

MAP 영역

정보 영역

11

<head>
<script src="./js/OpenLayers-2.12/lib/OpenLayers.js"></script>
<style type="text/css">
#map {
width: 100%; height : 100%; border: 1px solid black;
}
</style>
</head>

<body>
<table border="2" cellspacing="5" cellpadding="0"
style="border-color: #CCCCFF" width="100%" height="100%">

<tr height="10%"><td align="center">Controls</td></tr>
<tr height="70%">
<td align="center">

<div id="map">MAP</div>
</td>
</tr>

<tr height="20%">
<td align="center"><div id="output">정보</div></td>
</tr>
</table>
</body>
12

-

Map의 기본설정을 위한 지도 정보 확인
- MaxExtent
- 지원 좌표계
- 이미지 포멧
- 지원 레이어 확인

-

요청 URL :
http://localhost:8080/geoserver/seoul/wms?service=WMS&version=1.3.0
&request=GetCapabilities

<Capability>
<Request>...</Request>
<Exception>...</Exception>
<Layer>...</Layer>
</Capability>

: 지원하는 Request요청을 정의
: 지원하는 Exception 타입을 정의
: 지원하는 좌표계와 레이어의 종류를 정의
14

3. Layer
1) WMS Layer

레이어란 현실세계의 형상(Feature)들의 집합이다.
형상(Feature)이란 현실세계의 대상물을 표현한다. 예를 들어 건물 하나 하나를
형상(Feature)이라 하고 이들의 집합을 건물 레이어라 한다.
레이어는 건물 레이어, 도로 레이어 등 표현되는
다양한 형상(Feature)에 따라 많은 레이어가
존재할 수 있다.
Map객체가 선언이 되었다면 해당 Map객체에
레이어를 등록 함 으로서 지도화면에서
지도를 볼 수 있습니다.

15

3. Layer
var baseLayer; //전역변수
baseLayer = new OpenLayers.Layer.WMS(
'WMS EMD', //레이어의 타이틀
'http://localhost:8080/geoserver/seoul/wms', //지도를 제공하는 WMS서버의 URL
{
//WMS서버에서 제공하는 레이어
layers: 'seoul:landsat,seoul:admin_emd ',
transparent: 'true',
//bgColor에 해당하는 색상을 투명 여부
bgColor: '0xFFFFFF',
//지도의 바탕 색상
exceptions: 'BLANK'
//서버상 오류시 빈 이미지로 반환
}, {
isBaseLayer: true,
//기본 레이어 설정 유무
singleTile: false
//싱글 타일 유무
}
);
//Map객체에 BaseLayer추가
map.addLayers([baseLayer]);
map.zoomToExtent(maxBounds);

API :
http://dev.openlayers.org/apidocs/files/OpenLayers/
Layer/WMS-js.html
16

실습예제 - start2_ex.html
Q. 다음의 조건에 맞는 WMS 레이어를
추가하세요.
- 레이어 이름 : „서울시 구 경계‟
- layers : admin_sgg
- transparent : false
- bgColor : 0x000000
- isBaseLayer : true
17

var baseLayer2 = new OpenLayers.Layer.WMS(
'서울시 구 경계',
'http://localhost:8080/geoserver/seoul/wms',
{
layers: 'seoul:admin_sgg',
transparent: 'false',
bgColor: '0x000000'
}, {
isBaseLayer: true,
singleTile: false
}
);
map.addLayers(baseLayer2);
18

3. Layer
2) Overlay Layer
OpenLayers는 지도 서버로부터 지도 레이어를 전송받아 상호간에 중첩하여 활용
할 수 있다.
여기서는 한강레이어와 소방서, 경찰서 레이어를 맵객체에 추가하여 중첩된 모
습을 구현한다.

19

3. Layer
var riverLayer = new OpenLayers.Layer.WMS(
'WMS RIVER',
'http://localhost:8080/geoserver/wms',
{
layers: 'seoul:river',
exceptions: 'BLANK'
}, {
isBaseLayer: false,
singleTile: false,
opacity : 0.1
}
);

//한강레이어 호출

//레이어의 투명도 설정

var firePoliceLayer = new OpenLayers.Layer.WMS(
'WMS FIREPOLICE',
'http://localhost:8080/geoserver/wms',
{
layers: 'seoul:firestation,seoul:policestation', //소방서와 경찰서 레이어 호출(콤마로 레이어 구분)
exceptions: 'BLANK'
}, {
isBaseLayer: false,
singleTile: false
}
);
map.addLayers([riverLayer,firePoliceLayer]);

20

3. Layer
3) Vector Layer – WFS Layer

Vector 지도는 WMS 레이어와 달리 지도가 이미지 형태
가 아닌 XML또는 String 등의 형태로 지도 형상의 좌표
와 각종정보가 포함된 지도를 말한다.
이러한 지도의 형태를 표현하기 위해 OpenLayers는
Vector 레이어를 제공한다.
OpenLayers의 Vector 레이어는 OGC표준의 WFS, GML
은 물론 GeoJSON, KML, GeoRSS 등의 다양한 포맷을
지원한다.
21

3. Layer
var style= new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
strokeColor: 'red',
fillColor: 'green',
strokeWidth: 2,
strokeOpacity: 1,
fillOpacity: 0.7,
pointRadius: 5
})
});
var wfsLayer = 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'
}),
styleMap : style,
visibility : false
});
map.addLayers([wfsLayer]);
API : http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/Vector-js.html
22

Q. WFS RIVER 레이어 호출시에 아
래와 같은 필터 조건을 사용하여
WFS GetFeature를 하세요.
- river_cd = 1
API :

http://dev.openlayers.org/apidocs/files/OpenLayers/Filter/Co
mparison-js.html
23

var wfsLayer = new OpenLayers.Layer.Vector('WFS River', {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
featureType: 'river',
featureNS: 'http://geoserver.org/seoul'
}),
styleMap: style,
visibility: true,
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
//type: „==‟,
property: „RIVER_CD‟,
value: „1‟
})
});
24

3. Layer
4) Vector Layer – 기타
var jsonLayer; //전역변수
var storeStyle = new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
strokeColor: 'red', strokeWidth: 2,
fillColor: 'yellow', pointRadius: 5
})
});
jsonLayer = new OpenLayers.Layer.Vector('JSON Store', {
styleMap: storeStyle
});
map.addLayer(jsonLayer);

function readJson(req) {
if(req.readyState == 4){
var json= new OpenLayers.Format.GeoJSON();
var jsonFeatures = json.read(req.responseText);
jsonLayer.addFeatures(jsonFeatures);
}
}

//GeoJSON 사용 예
OpenLayers.Request.GET({
async: true,
params: {
TYPENAME: 'seoul:stores',
MAXFEATURES: '1000',
SERVICE: 'WFS',
VERSION: '1.0.0',
REQUEST: 'GetFeature',
SRS: „EPSG:2097',
BBOX: '60166.509,408487.088, 335086.509,494327.088',
OUTPUTFORMAT: „json„
},
success: function(response) { readJson(response); },
failure: function() { alert('실패'); }
});

25

4. Controls

OpenLayers에서 Control은 지도 영역내의 지도를 확대,
축소, 이동과 같은 조작 행위를 하기 위해 사용되는 객체
이다.
OpenLayers에서는 약 40여개의 컨트롤을 지원한다.
여기서는 가장 많이 쓰이는 컨트롤에 대하여 설명과 예
제를 통해 실습한다.

26

4. Controls
1) Controls – LayerSwitcher,PanZoomBar,MousePosition,Navigation,ScaleLine

Navigation

LayerSwitcher

ScaleLine

MousePosition

API : http://dev.openlayers.org/apidocs/files/OpenLayers/Control-js.html
27

4. Controls
1) Controls – LayerSwitcher,PanZoomBar,MousePosition,Navigation,ScaleLine
//LayerSwitcher – 레이어 목록을 나열하고 레이어별 ON/OFF를 설정하는 컨트롤
var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
map.addControl(layerSwitcher);
//PanZoomBar - 지도를 이동/확대 할 수 있는 기능을 가지는 컨트롤
var panZoomBar = new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true});
map.addControl(panZoomBar);
//MousePosition – 지도영역위에 마우스 포인터 위치를 실세계 좌표로 변환하여 지도영역 하단에 표시
var mousePosition = new OpenLayers.Control.MousePosition();
map.addControl(mousePosition);
//Navigation - 지도를 마우스를 이용하여 상하좌우로 이동하고 마우스 휠을 통해 확대/축소
var navi = new OpenLayers.Control.Navigation({handleRightClicks: true})
map.addControl(navi);
//ScaleLine - 지도화면에 현재 축척 표시
var scaleLine = new OpenLayers.Control.ScaleLine();
map.addControl(scaleLine);
28

4. Controls
2) Controls – 확대,축소,이동,이전,이후
OpenLayers의 다양한 컨트롤 및 Map객체의 기능으로 지도조작에 필요한 기능을 배치하고 활용 할 수 있다.
var naviHis, controls; //전역변수로 등록
naviHis = new OpenLayers.Control.NavigationHistory();
map.addControl(naviHis);
naviHis.activate();
for(var key in controls) {
map.addControl(controls[key]);
}

<a href="javascript:map.zoomIn()">확대</a> |
<a href="javascript:map.zoomOut()">축소</a> |
<a href="javascript:mapHistory('prev')">이전</a> |
<a href="javascript:mapHistory('next')">이후</a> |
<a href="javascript:toggleControl('navi')">이동</a>

function mapHistory(opt) {
if(opt == 'prev') {
naviHis.previousTrigger();
} else {
naviHis.nextTrigger();
}
}
function toggleControl(element) {
for(key in controls) {
var control = controls[key];
if(element == key) {
control.activate();
} else {
control.deactivate();
}
}
}

29

1) 도형그리기
Vector 레이어에 Point, Line, Polygon을 사용자가 직접 그려 지도 위에 오버레이 할 수 있다.
var pointLayer, lineLayer, polygonLayer; //전역변수로 등록
pointLayer = new OpenLayers.Layer.Vector("Point Layer");
lineLayer = new OpenLayers.Layer.Vector("Line Layer");
polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

<a href="javascript:toggleControl('point')">점</a>|
<a href="javascript:toggleControl('line')">선</a>|
<a href="javascript:toggleControl('polygon')">면</a>|
<a href="javascript:toggleControl('none')">해제</a>

map.addLayers([pointLayer, lineLayer, polygonLayer]);
controls = {
navi: new OpenLayers.Control.Navigation({handleRightClicks: true}),
point: new
OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Poi
nt),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon)
};
}
30

Q. 지도위에 직사각형을 그릴 수 있는 그리기
도구를 추가하세요.
- Drawing Layer : polygonLayer
- Control Name : „rect‟
- 사용할 Handler : RegularPolygon

31

<a href="javascript:toggleControl('rect')">사각형</a>
controls = {
.
.
rect: new OpenLayers.Control.DrawFeature(
polygonLayer, OpenLayers.Handler.RegularPolygon, {
handlerOptions: {
sides: 4, irregular: true
}
}
)
};
32

2) 도형 선택, 삭제

Vector 레이어에 그려진 도형을 선택하고 삭제할 수 있다.

var selectedFeatures = []; //전역변수로 등록
map.addLayers([pointLayer, lineLayer, polygonLayer]);
selectControl = new OpenLayers.Control.SelectFeature(
[pointLayer, lineLayer, polygonLayer], {
clickout: true, toggle: false, multiple: false, hover: false,
toggleKey: "ctrlKey", multipleKey: "shiftKey"
}
);
controls["select"] = selectControl;
}

//도형 선택
function unselectFeatures(sf, f) {
for(i = 0 ; i < sf.length ; i ++) {
if(sf[i] == f) { sf.pop(i); }
}
}
//도형 삭제
function removeFeatures() {
pointLayer.removeFeatures(selectedFeatures);
lineLayer.removeFeatures(selectedFeatures);
polygonLayer.removeFeatures(selectedFeatures);
selectedFeatures.splice(0, selectedFeatures.length);
}
<a href="javascript:toggleControl('select')">선택</a>|
<a href="javascript:removeFeatures()">삭제</a>|

pointLayer.events.on({
"featureselected": function(e){
selectedFeatures.push(e.feature);
}, "featureunselected": function(e) {
unselectFeatures(selectedFeatures, e.feature);
}
});
33

var selectionLayer; //전역변수
var infoStyleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "blue",
fillColor: "red",
strokeWidth: 2,
strokeOpacity: 1,
fillOpacity: 0.7,
pointRadius: 5
})
});
selectionLayer = new OpenLayers.Layer.Vector("info");
selectionLayer.styleMap = infoStyleMap;
map.addLayer(selectionLayer);
//컨트롤 추가
function mapControl(str) {
for(key in controls) {
var control = controls[key];
control.deactivate();
}
switch(str) {
case "info":
map.events.register('click', map, onClick);
break;
}
}

<a href="javascript:mapControl('info')">정보</a>

34

//클릭시 이벤트 발생
function onClick(e) {
OpenLayers.Request.GET({
url: "http://localhost:8080/geoserver/seoul/wms",
async: true,
params: {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "XML",
BBOX: baseLayer.map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'application/vnd.ogc.gml',
LAYERS : 'admin_emd',
QUERY_LAYERS: 'admin_emd',
WIDTH: baseLayer.map.size.w,
HEIGHT: baseLayer.map.size.h
},
success: function(response) {
setFeatures(response);
},
failure: function() {
alert("실패");
}
});
OpenLayers.Event.stop(e);
}

//요청 성공시
function setFeatures(response) {
g = new OpenLayers.Format.GML();
features = g.read(response.responseText);
displayInfo(features);
}

//정보 출력
function displayInfo(features) {
selectionLayer.removeAllFeatures();
var html = "";
if (features != null && features.length > 0) {
for(var feat in features) {
selectionLayer.addFeatures(features[feat]);
for (var j in features[feat].attributes) {
html += "<li>"+j+": "
+features[feat].attributes[j]+"</li>";
}
html += "</ul>";
}
}
document.getElementById('output').innerHTML = html;
}
35

7. Marker
//Marker 오버레이 레이어 추가
var markers; //전역변수
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
function addMarker() {
var features = jsonLayer.features;
var size = new OpenLayers.Size(21,25);
//아이콘이 그려질 OFFSET
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
markers.clearMarkers();
for(var i = 0 ; i < features.length ; i ++) {
var icon = new OpenLayers.Icon(
'http://www.openlayers.org/dev/img/marker.png',
size, offset);
markers.addMarker(
new OpenLayers.Marker(
new OpenLayers.LonLat(
features[i].geometry.x,features[i].geometry.y
), icon
)
);
}

<a href="javascript:addMarker()">Marker</a>

}

API : http://dev.openlayers.org/apidocs/files/OpenLayers/Marker-js.html

36


Q. 사용자가 클릭한 위치에 마커
를 표시하세요.
Q. markers 레이어의 모든 마커
를 삭제하세요.
37

<a href="javascript:mapControl('marker2')">
Marker2
</a>
<a href="javascript:markers.clearMarkers()">
Marker 삭제
</a>

38

function mapControl(str) {
...
case "marker2":
map.events.register('click', map, addMarker2);
break;
...
}
function addMarker2(e) {
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
markers.clearMarkers();
lonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(e.xy.x, e.xy.y));
icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset);
markers.addMarker(new OpenLayers.Marker(lonLat, icon));
map.events.unregister('click', this, addMarker2);
}
39

8. POPUP
var popup; //전역변수
//속성정보 조회 후 팝업으로 표시
function displayInfo(features) {
.
.
.
.
if (features[0] != undefined) {
var geom = features[0].geometry;
var center = geom.getCentroid();
var pixcel = map.getPixelFromLonLat(
new OpenLayers.LonLat(center.x, center.y));
if(popup) {
map.removePopup(popup);
}
popup = new
OpenLayers.Popup.FramedCloud("Info",
new OpenLayers.LonLat(center.x, center.y),
new OpenLayers.Size(200,300),
html, null, true, null);
map.addPopup(popup);
}

API :
http://dev.openlayers.org/apidocs/files/OpenLaye
rs/Popup-js.html
40

8. POPUP
//Vector레이어의 Feature 선택 컨트롤 생성
var jsonSelectControl = new OpenLayers.Control.SelectFeature(
[jsonLayer],
{
clickout: true,
toggle: false,
multiple: false,
hover: false,
toggleKey: 'ctrlKey',
multipleKey: 'shiftKey'
}
);
map.addControl(jsonSelectControl);
jsonSelectControl.activate();

//컨트롤로 추가
//컨트롤 활성화

//선택, 해제 이벤트 발생
jsonLayer.events.on({
'featureselected': function(e) {
if(e.feature) {
displayInfo([e.feature]);
}
},
'featureunselected': function(e) {
unselectFeatures(jsonLayer.features, e.feature);
}
});
41

9. Google Map
<!—구글맵 라이브러리 추가-->
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<!– 맵 기본설정-->
<script type=“text/javascript”>
var options = {
projection: new OpenLayers.Projection("EPSG:900913") //EPSG:3857
}
//Map 객체와 DIV를 연결
map = new OpenLayers.Map('map', options);

//SATELLITE
var hGoogle = new OpenLayers.Layer.Google("Google Satellite", {
type: google.maps.MapTypeId.SATELLITE
});
map.addLayer(hGoogle);
</script>

http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Layer/Google-js.html
43


Q. 구글맵에서 제공하는 다음의 지
도 유형을 추가하세요.
- 기본 로드맵 보기
- Google 위성 이미지
- 기본뷰 + 위성보기 혼합
- 지형 정보 지도
https://developers.google.com/map
s/documentation/javascript/maptyp
es?hl=ko-KR#MapTypes
44

오픈소스GIS 개론 과정 - OpenLayers 기초

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 오픈소스GIS 개론 과정 - OpenLayers 기초

Similar to 오픈소스GIS 개론 과정 - OpenLayers 기초 (20)

More from HaNJiN Lee

More from HaNJiN Lee (6)

오픈소스GIS 개론 과정 - OpenLayers 기초