• Save
오픈소스GIS 개론 과정 - OpenLayers 기초
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,423 views

오픈소스GIS 개론 과정

오픈소스GIS 개론 과정

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

Statistics

Views

Total Views
4,423
Slideshare-icon Views on SlideShare
2,208
Embed Views
2,215

Actions

Likes
5
Downloads
0
Comments
0

6 Embeds 2,215

http://www.osgeo.kr 2020
http://osgeo.kr 145
http://osgeo-kr.tistory.com 38
http://www.hanrss.com 5
https://twitter.com 5
http://feedly.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • (주)망고시스템 박주용 (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
    • 2. Map 기본 설정 컨트롤 영역 MAP 영역 정보 영역 11
    • 2. Map 기본 설정 <!--오픈레이어스 라이브러리 포함--> <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> <!-- HTML BODY 내에 MAP의 DIV를 정의--> <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"> <!-- Map영역--> <div id="map">MAP</div> </td> </tr> <!-- 정보영역 --> <tr height="20%"> <td align="center"><div id="output">정보</div></td> </tr> </table> </body> 12
    • 2. Map 기본 설정 <script type="text/javascript"> var map; var maxBounds = new OpenLayers.Bounds(179101.769,436263.77,216151.249,466550.406); var titleSize = new OpenLayers.Size(256, 256); function init(){ //HTML BODY가 로드 될 때 호출 var options = { maxExtent: maxBounds, tileSize: titleSize, numZoomLevels: 10, maxResolution: 50, controls: [], projection: „epsg:2097‟, units: „m‟ }; //지도영역이 표현하는 지도의 실세계 영역 //지도영역에 불러올 타일 이미지의 가로세로 사이즈 //지도의 줌 레벨 //지도의 해상도 //지도를 컨트롤하는 컨트롤러 //지도의 좌표계 //Map 객체와 DIV를 연결 map = new OpenLayers.Map('map', options); //레이어 목록과 ON/OFF설정 var layerSwitcher = new OpenLayers.Control.LayerSwitcher(); map.addControl(layerSwitcher); } </script> API : http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html 13
    • 2. Map 기본 설정 - 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
    • 실습예제 - start2_ex.html 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', transparent: 'true', bgColor: '0xFFFFFF', 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', //소방서와 경찰서 레이어 호출(콤마로 레이어 구분) transparent: 'true', bgColor: '0xFFFFFF', 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
    • 실습예제 - start4_ex.html Q. WFS RIVER 레이어 호출시에 아 래와 같은 필터 조건을 사용하여 WFS GetFeature를 하세요. - river_cd = 1 API : http://dev.openlayers.org/apidocs/files/OpenLayers/Filter/Co mparison-js.html 23
    • 실습예제 - start4_ex.html 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: 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({ url: 'http://localhost:8080/geoserver/seoul/wfs', 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
    • 5. 사용자 그리기 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) }; for(var key in controls) { map.addControl(controls[key]); } 30
    • 실습예제 - start8_ex.html Q. 지도위에 직사각형을 그릴 수 있는 그리기 도구를 추가하세요. - Drawing Layer : polygonLayer - Control Name : „rect‟ - 사용할 Handler : RegularPolygon 31
    • 실습예제 - start8_ex.html <a href="javascript:toggleControl('rect')">사각형</a> controls = { . . rect: new OpenLayers.Control.DrawFeature( polygonLayer, OpenLayers.Handler.RegularPolygon, { handlerOptions: { sides: 4, irregular: true } } ) }; 32
    • 5. 사용자 그리기 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; for(var key in controls) { map.addControl(controls[key]); } //도형 선택 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
    • 6. 속성정보 조회 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
    • 6. 속성정보 조회 //클릭시 이벤트 발생 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
    • 실습예제 - start11_ex.html Q. 사용자가 클릭한 위치에 마커 를 표시하세요. Q. markers 레이어의 모든 마커 를 삭제하세요. 37
    • 실습예제 - start11_ex.html <a href="javascript:mapControl('marker2')"> Marker2 </a> <a href="javascript:markers.clearMarkers()"> Marker 삭제 </a> 38
    • 실습예제 - start11_ex.html 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 42
    • 9. Google Map <!—구글맵 라이브러리 추가--> <script src="http://maps.google.com/maps/api/js?v=3&amp;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
    • 실습예제 - start14_ex.html Q. 구글맵에서 제공하는 다음의 지 도 유형을 추가하세요. - 기본 로드맵 보기 - Google 위성 이미지 - 기본뷰 + 위성보기 혼합 - 지형 정보 지도 https://developers.google.com/map s/documentation/javascript/maptyp es?hl=ko-KR#MapTypes 44
    • 실습예제 - start14_ex.html 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, sphericalMercator: true }); var rGoogle = new OpenLayers.Layer.Google("Google Roadmap", { type: google.maps.MapTypeId.ROADMAP, sphericalMercator: true }); var tGoogle = new OpenLayers.Layer.Google("Google Terrain", { type: google.maps.MapTypeId.TERRAIN, sphericalMercator: true }); map.addLayers([sGoogle, rGoogle, tGoogle, hGoogle]); 45
    • 감사합니다. 46