[자바스크립트 - OpenLayers] 오픈레이어스

티스토리 뷰

Front

[자바스크립트 - OpenLayers] 오픈레이어스

RAHM 2013. 11. 8. 10:24

이 게시물의 출처를 밝힙니다.

http://blog.naver.com/junddang2/30133261952

--------------------------------------------------------------------------------------------------------------------------------------

들어가며

문서의 구성

– 이 문서는 OpenLayers에 대한 설명과 예제로 구성되어 있습니다.

n Chapter 1 – OpenLayers에 대한 설명으로 구성됩니다.

n Chapter 2 – OpenLayers의 Class들에 대한 설명입니다.

n Chapter 3 – OpenLayers를 이용해 지도를 로딩하고 지도기본조작기능 구현을 기초부터 따라서 해볼 수

있도록 구성하였습니다.

사전이해

– 이 문서를 들어가기 이전에 필요한 것들

n 객체지향 프로그래밍

n Javascript

n xml parsing

n OGC 표준

자료

– 압축해제한 후 생성되는 “샘플소스및클래스다이어그램” 폴더에 다음과 같은 자료가 포함되어 있습니다.

n OpenLayers Diagram 파일(2.8버전이 없어 2.7 버전으로 배포)

n Chapter 3 에서 사용한 예제 파일(jsp, js)

소스 개발 규칙

– OpenLayers 기반으로 개발을 할 때 다음과 같은 규칙으로 사용하기를 권장합니다.

n OpenLayers에서 제공되는 js library 를 변경하지 않습니다.

→ OpenLayers에서 제공되는 js library 를 기본으로 지도 기능이 구현되기 때문에 js library를 변경할 경우 해당 기능에서는 작동하지만 다른 기능을 실행할 경우 문제가 될 수 있습니다. 그러므로 제공되는 기능을 추가 및 수정하고 싶을 때는 OpenLayer의 클래스를 상속 받은 새로운 클래스를 생성하여 추가 및 수정 작업을 합니다.

n 관련된 프로퍼티나 함수는 네임스페이스 단위로 관리 합니다.

→ 프로퍼티나 함수를 각각 독립된 객체로 관리하지 않고 전역 변수 및 전역 함수로 사용할 경우 같은 이름 사용으로 인한 문제가 발생할 수 있습니다.

기타

– OpenLayers에서 다루는 모든 기능을 설명하고 있지는 않으며 다뤄본 부분 내에서 자주 사용되는 기능 위주로 .설명하고 있습니다. 이 기술문서에 대해 오류를 발견하거나 추가사항 등의 의견이 있으신 분은 공동이행팀 기술파트로 연락 주시기 바랍니다. 보내주신 의견은 검토 후 다음 버전에 반영하도록 하겠습니다.

OpenLayers

Chapter 1 OpenLayers 개요

1. OpenLayers 특징

2. OpenLayers 이해

3. OpenLayers 다운로드 및 개발 예제

Chapter 2 OpenLayers Class

Chapter 2 OpenLayers 지도 기능

1. 지도 띄우기(WMS)

2. 지도조작 컨트롤

3. 이전, 다음 컨트롤

Chapter 1 OpenLayers 개요

1. OpenLayers 특징

A. 웹 지도 서비스를 위한 라이브러리

B. 클라이언트 사이드 javascript

C. AJAX, Web2.0 활용

D. BSD 라이선스 (자유롭게 수정/배포가능)

2. OpenLayers 이해

A. Javascript 기반으로 Java와 다르다.
– Java와 Javascript는 이름은 비슷하지만 전혀 다른 언어이다. 그렇기 때문에 Java를 모르더라도 Javascript를 이해하기에는 문제가 없다.

B. Javascript 기반이기 때문에 구축환경과 관계가 없다.
– Javascript 기반이기 때문에 웹 페이지가 구동 가능한 환경이면 개발 및 실행이 가능하다. 그러므로 Java framework(Sping, EJB 등), ASP.NET 등과 관계없이 html 파일로도 개발 및 실행이 가능하다

C. OpenLayers에서 지도 서비스를 제공해 주지는 않는다.
– OpenLayers에서 지도 서비스를 제공해 주지 않기 때문에 G2WebService, 구글맵,야후맵 등과 같은 지도 서비스를 제공하는 서버가 필요하다.

D. OpenLayers는 지도 서비스를 편리하게 사용할 수 있게 해주는 도구이다.
– OpenLayers를 사용하지 않더라도 지도 서비스에 WMS, WFS등 표준 포맷에 맞게 요청을 보내주면 지도 서비스를 구현할 수 있지만 OpenLayers를 사용하면 보다 편리하게 다양한 기능을 활용할 수 있다.

E. OpenLayers는 용도에 따라 js 파일이 나누어 진다.
– OpenLayers를 다운 받으면 전체 라이브러리가 한 개의 파일로 된 것과 개발자용으로 각 기능별로 분류하여 각각의 js파일로 나누어 놓은 것 2가지가 있다.

3. OpenLayers 다운로드 및 개발 예제

A. OpenLayers.Download(2.8 기준)
– http://www.openlayers.org/ 에 접속해서 zip 파일을 다운 받는다. 다운 받은 zip파일의 압축을 풀면 OpenLayers의 소스, 문서, 예제 샘플 등이 포함되어있다.

B. OpenLayers Documentation (2가지 중 하나로 확인)
– http://dev.openlayers.org/releases/OpenLayers-2.8/doc/devdocs/files/OpenLayers-js.html
– 압축푼경로/Openlayers-2.8/doc/devdocs/ 폴더

C. OpenLayers Example(2가지 중 하나로 확인)
– http://openlayers.org/dev/examples/
– 압축푼경로/Openlayers-2.8/examples/ 폴더

Chapter 2 OpenLayers Class

OpenLayers의 Class중 기본이 되거나 자주 사용하게 되는 Class 위주로 설명하였으며 앞으로 지속적으로 추가/보완할 예정입니다.

1. Map

– 웹 지도 서비스를 제공하기 위해 기본이 되는 클래스.

– 지도를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성되어 있음.

– Layer, 컨트롤, 팝업 등을 등록하기 위한 기본 컨테이너가 됨.

– 생성자 : OpenLayers.Map(div, options).

l div – 지도가 띄워질 영역 생성을 위한 엘리먼트(DIV) 지정

l options – Map객체 생성을 위한 옵션들로 영역, 좌표계, 단위 등을 명시하는 부분

(지정하지 않으면 Default 속성 사용)

2. Layer

– Layer를 생성하고 조작하는 프로퍼티 및 함수로 구성된 클래스

– Map 컨테이너 위에 여러 개의 Layer를 등록하여 보여줄 수 있음.

– 포토샵의 Layer와 비슷함. (셀로판 종이라고 생각하면 이해하기 쉬움. 여러 개의 셀로판 종이를 겹쳐서 보여줌)

– Hub에서 등록할 때의 한 개의 Layer(법정동, 건물)등 과는 다름. OpenLayers의 WMS Layer는 Hub에서 등록한 여러 개의 Layer를 합쳐서 한 개의 WMS Layer로 나타냄

– WMS, WFS, GML, Vector Layer 등을 지원.

– 생성자 : OpenLayers.Layer(name, options)

l name – Layer 이름

l options – Layer 생성을 위한 옵션

A. Vector

– Vector 기반의 Layer를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성된 클래스

– 생성자 : OpenLayers.Layer.Vector(name, options)

l name – Layer 이름

l options – Layer 생성을 위한 옵션

B. WMS

– WMS Layer를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성된 클래스

– 생성자 : OpenLayers.Layer.WMS(name, url, param, options)

l name – Layer 이름

l url – WMS 지도 서비스 주소

l params – WMS로 요청할 parameter들(버전, Layer/Style 목록, CRS 등)

l options – Layer 생성을 위한 옵션

C. WFS

– WFS Layer를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성된 클래스.

– 생성자 : OpenLayers.Layer.WFS(name, url, params, options)

l name – Layer 이름

l url – WFS 지도 서비스 주소

l params – WFS로 요청할 parameter들(버전, Layer/Style 목록, CRS 등)

l options – Layer 생성을 위한 옵션

D. GML

– GML 기반의 Layer를 생성하고 조작하기 위한 프로퍼티 및 함수로 구성된 클래스

– 생성자 : OpenLayers.Layer.GML(name, url, options)

l name – Layer 이름

l url – WMS 지도 서비스 주소(파라미터 포함 - Get방식)

l options – Layer 생성을 위한 옵션

3. BaseTypes

– OpenLayers에서 사용하는 기본 타입들을 정의함.

– 문자열, 숫자, 함수, 배열을 다루기 위한 함수 포함.

– BaseTypes 아래의 클래스와 직접적인 관계는 없음.

A. Bounds

– 영역을 지정합니다.(지도 좌표 기준)

– 생성자 : OpenLayers.Bounds(left, bottom, right, top)

l left – 영역의 왼쪽 좌표 (x좌표 min 값)

l bottom – 영역의 아래쪽 좌표 (y좌표 min 값)

l right – 영역의 오른쪽 좌표 (x 좌표 max 값)

l top – 영역의 위쪽 좌표 (y 좌표 max 값)

B. Class

– Javascript를 객체지향 프로그래밍과 비슷하게 구성하기 위해 사용하는 클래스. 상속개념을 비슷하게 지원한다.

C. LonLat

– 지도 좌표를 프로퍼티로 가지고 조작하기 위한 함수를 제공하는 클래스

– 지도좌표의 X, Y 좌표 값

– 생성자 : OpenLayers.LonLat(lon, lat)

l lon – 지도 X 좌표

l lat – 지도 Y 좌표

D. Pixel

– 화면 좌표를 프로퍼티로 가지고 조작하기 위한 함수를 제공하는 클래스

– 현재 창 화면의 X, Y 좌표 값

– 생성자 : OpenLayers.Pixel(x, y)

l x – 현재 창 화면의 X 좌표

l y – 현재 창 화면의 Y 좌표

E. Size

– 영역의 너비, 높이를 지정하는 포맷

– 생성자 : OpenLayers.Size(w, h)

l w – 영역의 너비 값

l h – 영역의 높이 값

4. Control

– 맵 객체를 컨트롤 하기 위한 클래스

– 확대, 축소, 거리, 면적 등의 컨트롤의 기본 클래스.

A. DrawFeature

– 지도에 그리기(점,선,면) 기능과 관련된 클래스

– Layer에 Feature(점, 선, 면, 마커 등)을 등록한다.

– 생성자 : OpenLayers.Control.DrawFeature(layer, handler, options)

l layer – Feature를 등록할 Layer

l handler – 컨트롤과 연결할 Handler 클래스

l options – 컨트롤에 등록할 옵션들.

B. Measure

– 거리, 면적 기능과 관련된 클래스.

– 생성자 : OpenLayers.Control.Measure(handler, options)

l handler – 컨트롤과 연결할 Handler 클래스

l options – 컨트롤에 등록할 옵션들

C. MouseDefaults

– 마우스를 이용한 지도 조작과 관련된 컨트롤.

– 지도 이동, 마우스 휠을 이용한 확대/축소 기능

– 생성자 : OpenLayers.Contro.MouseDefault()

D. MouseToolbar

– 이동과 영역 지정 확대와 관련된 컨트롤

– 이동, 확대 패널(DIV) 생성.

– 이동 기능과 Shift + 마우스 드래그 시 확대 기능

– 생성자 : OpenLayers.Control.MouseToolbar(position, direction)

l position – 툴바의 위치(OpenLayers.Pixel 클래스의 객체)

l direction – 방향 (‘vertical’ or ‘horizontal’)

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock><w:bordertop type="single" width="4"></w:bordertop><w:borderleft type="single" width="4"></w:borderleft><w:borderbottom type="single" width="4"></w:borderbottom><w:borderright type="single" width="4"></w:borderright>

E. MousePosition

– 마우스 위치와 관련된 컨트롤

– 맵 위에 현재 마우스 위치에 해당하는 지도 좌표를 표시함.

– 생성자 : OpenLayers.Control.MousePosition(options)

l options – 컨트롤에 등록할 옵션들

<w:bordertop type="single" width="4"></w:bordertop><w:borderleft type="single" width="4"></w:borderleft><w:borderbottom type="single" width="4"></w:borderbottom><w:borderright type="single" width="4"></w:borderright>

F. Navigation

– 지도 조작과 관련된 컨트롤

– 지도 이동, 휠을 이용한 확대/축소, 더블클릭 시 확대 해당좌표 기준 확대 기능

– 생성자 : OpenLayers.Control.Navigation(options)

l options – 컨트롤에 등록할 옵션들

G. NavigationHistroy

– 지도 이전, 다음 기능과 관련된 컨트롤

– 이전, 다음 컨트롤을 생성.

– 생성자 : OpenLayers.Control.NavigationHistory(options)

l options – 컨트롤에 등록할 옵션들

H. NavToolbar

– 이동과 영역 지정 확대와 관련된 컨트롤

– 이동, 확대 패널(DIV) 생성.

– 이동 기능과 마우스 드래그 시 확대 기능

– 메뉴에서 확대 선택 후엔 바로 확대 기능으로 작동
(MouseToolbar와의 차이 : MouseToolbar는 확대 클릭 후 shift + Drag로 사용)

– 생성자 : OpenLayers.Control.NavToolbar(options)

l options – 컨트롤에 등록할 옵션들

I. OverviewMap

– 인덱스 지도와 관련된 컨트롤

– 인덱스 지도(DIV) 생성.

– 인덱스 지도에서 기본 조작할 경우 기본 지도의 이동 기능

– 생성자 : OpenLayers.Control.OverviewMap(options)

l options – 컨트롤에 등록할 옵션들

J. Panel

– 패널(DIV)와 관련된 컨트롤

– 패널(DIV)를 생성하고 패널에 컨트롤을 연결.

– 생성자 : OpenLayers.Control.Panel(options)

l options – 컨트롤에 등록할 옵션들

K. PanZoom

– 인덱스 지도와 관련된 컨트롤

– 왼쪽 상단에 네비게이션(위, 아래, 왼쪽, 오른쪽 이동), 확대/축소 패널(DIV)생성.

– 생성된 버튼 클릭 시 이동, 확대/축소, 전체영역이동 기능

– 생성자 : OpenLayers.Control.PanZoom(options)

l options – 컨트롤에 등록할 옵션들

L. PanZoomBar

– 축척바와 관련된 컨트롤

– 왼쪽 상단에 축척바 패널(DIV) 생성.

– 축척바 클릭 또는 축척바 드래그 시 확대/축소 기능

– PanZoom 클래스 상속으로 PanZoom의 기능도 사용.

– 생성자 : OpenLayers.Control.PanZoomBar()

M. SelectFeature

– 도형선택과 관련된 컨트롤

– Vector Layer에 그려진 Feature를 선택하고 조작.

– 선택한 도형 이동, 확대 기능

– 생성자 : OpenLayers.Control.SelectFeature(layers, options)

l layers – 컨트롤을 등록할 Layer의 배열

l options – 컨트롤에 등록할 옵션들

N. ZoomPanel

– 전체영역, 확대/축소와 관련된 컨트롤

– 지도 왼쪽 상단에 확대/축소/전체영역 패널(DIV) 생성

– ZoomToExtent, ZoomIn, ZoomOut 컨트롤과 연결.

– 생성자 : OpenLayers.Control.ZoomPanel(options)

l options – 컨트롤에 등록할 옵션들

O. ZoomToExtent

– 전체영역 관련된 컨트롤

– 바로 사용되지 않고 Panel에 연결하여 사용.

– 생성자 : OpenLayers.Control.ZoomToExtent()

P. ZoomIn

– 확대와 관련된 컨트롤

– 바로 사용되지 않고 Panel에 연결하여 사용.

– 생성자 : OpenLayers.Control.ZoonIn()

Q. ZoomOut

– 축소와 관련된 컨트롤

– 바로 사용되지 않고 Panel에 연결하여 사용.

– 생성자 : OpenLayers.Control.ZoonOut()

5. Handler

– 컨트롤과 연결되어 발행하는 이벤트 클래스

A. Drag

– 영역 그리기와 관련된 클래스.

– 사용자 마우스 이벤트에 따른 영역 박스 생성

B. Point

– 점 그리기와 관련된 클래스

– 사용자 마우스 이벤트에 따른 점 생성

C. Path

– 선 그리기와 관련된 클래스

– 사용자 마우스 이벤트에 따른 선 생성

D. Polygon

– 다각형 그리기와 관련된 클래스

– 사용자 마우스 이벤트에 따른 다각형 생성

E. RegularPolygon

– 정형화된 도형과 관련된 클래스

– 사용자 마우스 이벤트에 따른 정형화된 도형(원, 사각형) 생성

Chapter 2 OpenLayers 지도 기능

1. 지도 띄우기(WMS)

A. 지도를 띄우는 방법은 먼저 지도를 생성할 패널(DIV)에 Map 객체를 생성하고Map 객체에 Layer를 등록 한다. 그리고 등록한 Layer에서 BaseLayer를 지정하고 전체영역으로 이동시킨다. (소스 : Map.jsp)

B. 지도가 띄워지는 영역을 생성할 패널(DIV)를 작성한다

C. OpenLayers를 사용하기 위해 JS, CSS 파일을 포함한다. (경로는 각자의 환경에 맞춰 변경)

D. 사용할 전역변수를 선언 및 할당한다.

//서비스 주소

var serviceUrl = "http://203.236.216.202:8888/G2WebService/GService?";

var giMap; //Map객체

//초기 영역 값(허브 맵 토픽에서 확인)

var rExtent = new OpenLayers.Bounds(196472.05, 433243.75, 204129.20, 440642.50);

E. onload 이벤트에 초기화 함수를 지정한다.

//<body onload="initMap()"> 과 같음

window.onload = function() {

initMap();

};

F. Map 객체를 생성할 때 사용할 options을 설정한다.

//맵 기본 옵션설정

var maxRange = ((rExtent.right - rExtent.left)>(rExtent.top - rExtent.bottom))?(rExtent.right - rExtent.left):(rExtent.top - rExtent.bottom);

var options = {

//지도 투영법

projection: new OpenLayers.Projection("EPSG:4326"),

displayProjection: new OpenLayers.Projection("EPSG:4326"),

//지도 단위

units: "m",

//최대 해상도

maxResolution: maxRange/500,

//최대 지도 영역

maxExtent: rExtent

/* 기본 컨트롤 설정(아래의 경우 어떠한 컨트롤도 등록하지 않음

기본 컨트롤을 설정하지 않을 경우(아래 부분 삭제 또는 주석처리)

* - <OpenLayers.Control.Navigation>

* - <OpenLayers.Control.PanZoom>

* - <OpenLayers.Control.ArgParser>

* - <OpenLayers.Control.Attribution>

위 4개의 컨트롤이 기본적으로 생성되어 등록 */

, controls: []

};

G. Map 객체를 생성한다.

//Map 객체 생성

giMap = new OpenLayers.Map('map', options);

H. Layer 객체 생성한다.

//Layer 생성

var ol_wms = new OpenLayers.Layer.WMS(

"Main",

serviceUrl,

{

//Layer 목록 콤마(',')로 구분된 문자열

layers: '법정읍/면/동,행정읍/면/동,건물',

//Style 목록 콤마(',')로 구분된 문자열 - Layer목록과 1:1 매핑 관계

styles: '법정읍/면/동,행정읍/면/동,건물',

//이미지 포맷

format: 'image/png',

//WMS 버전

version: '1.3.0',

//수평 좌표 참조 체계

CRS: 'EPSG:4326'

{

//타일링을 하지 않음 (false로 설정 시 256*256 크기의 tile이미지로 서비스됨)

singleTile: true,

//확대, 축소 등의 조작 시 효과

transitionEffect: 'resize'

}

);

I. Map에 Layer를 등록한다.

//Layer 등록

giMap.addLayer(ol_wms);

J. 기본 Layer를 설정한다.

//기본 Layer 설정

giMap.setBaseLayer(ol_wms);

K. 지도 초기영역을 화면에 나타낸다.

//초기 영역으로 이동

giMap.zoomToMaxExtent();

2. 지도조작 컨트롤

지도를 조작하기 위해서는 마우스의 이벤트와 동작을 다루는OpenLayers.Control.MouseToolbar 클래스

를 이용해 지도조작 컨트롤을 생성하고 위에서 생성한 지도객체(giMap)에 등록하는 과정이 필요하다.

또한, 등록된 지도조작 컨트롤을 활성화(또는 비활성화)하고 이벤트에 따른 특화된 동작(행위)를 정의하

기 위해 OpenLayers.Control.MouseToolbar 클래스를 상속받은OpenLayers.Control.MouseToolbarCustom

클래스를 사용하게 된다. 이러한 과정들을 순서대로 살펴보도록 하자.

크게 기본, 이동, 확대, 축소 기능에 대해 설명한다. (소스 : MapControl.jsp)

A. OpenLayers.Control.MouseToolbarCustom 클래스를 정의하고 있는 파일을 포함한다.

B. 지도조작 컨트롤 등록 및 사용을 위한 전역 변수를 선언한다.

var mouseControl;

C. 지도조작을 위한 컨트롤을 생성하고 Map객체에 등록한다.

//지도조작 컨트롤 생성

mouseControl = new OpenLayers.Control.MouseToolbarCustom();

//지도조작 컨트롤 등록

giMap.addControl(mouseControl);

D. body 영역 안에 지도조작 컨트롤을 활성화(실행)하기 위한 버튼을 생성한다

E. window.onload 이벤트 시에 버튼 엘리먼트에 onclick 이벤트를 연결시킨다. 컨트롤을 활성화 시키기 위해 해당 OpenLayers.Control.MouseToolbarCustom 클래스를 상속받은 객체의 activate() 함수를 실행한다.

window.onload = function() {

initMap();

//기본 조작 컨트롤 활성

document.getElementById("btnDefault").onclick =function() {

//컨트롤 활성

mouseControl.activate();

//모드 설정 (마우서 커서 모드 설정)

mouseControl.switchModeTo("default");

};

//확대 조작 컨트롤 활성

document.getElementById("btnZoomIn").onclick =function() {

mouseControl.activate();

mouseControl.switchModeTo("zoomIn");

};

//축소 조작 컨트롤 활성

document.getElementById("btnZoomOut").onclick =function() {

mouseControl.activate();

mouseControl.switchModeTo("zoomOut");

};

//이동 조작 컨트롤 활성

document.getElementById("btnPan").onclick = function() {

mouseControl.activate();

mouseControl.switchModeTo("pan");

};

F. 이전 단계에서 생성한 지도조작 컨트롤에 다른 컨트롤을 등록한 후 활성화하려면 기존에 생성한 지도조작 컨트롤은 비활성화 시켜야 한다.
컨트롤을 비활성 시키는 방법은 Control.deactivate() 함수를 사용한다.

//다른 컨트롤 활성 시 지도조작 컨트롤 비활성

mouseControl.deactivate();

G. 지도조작 컨트롤에 사용한 OpenLayers.Control.MouseToolbarCustom 클래스를 생성하는 법은

MouseToolbarCustom.js 파일 생성 후 OpenLayers.Class 클래스를 사용하여OpenLayers.Control.MouseToolbar 클래스를 상속 받는다.

※ 상속을 받게 되면 상속받은 클래스(OpenLayers.Control.MouseToolbarCustom) 에서 오버라이딩 하지 않은 정보는 매개변수로 지정한 클래스(OpenLayers.Control.MouseToolbar)의 정보를 사용한다.

OpenLayers.Control.MouseToolbarCustom = OpenLayers.Class(

//상속할 클래스 지정

OpenLayers.Control.MouseToolbar, {

//클래스 네임 지정

CLASS_NAME: "OpenLayers.Control.MouseToolbarCustom"

}

);

H. 지도조작 컨트롤에서 기본모드를 기본(default)로 설정한다.

/**

* 모드 종류

* default : 기본

* zoomIn : 확대

* zoomOut : 축소

* pan : 이동

* default mode : 기본

mode: "default",

I. 지도조작 컨트롤 등록 시 initialize 함수가 실행되는데OpenLayers.Control.MouseToolbarCustom 클래스에서 initialize 함수를 재정의 하지 않았으므로 부모클래스인 OpenLayers.Control.MouseToolbar 클래스의 initialize 함수가 실행된다.

J. OpenLayers.Control.MouseToolbar 클래스의 draw함수를 사용할 경우 확대/이동 UI를 기본으로 제공한다. 이것을 막기 위해서OpenLayers.Control.MouseToolbarCustom 클래스의 draw함수를 재정의하여 사용한다.

/**

* 지도위에 확대, 이동 툴을 생성하는 것을 삭제

draw: function() {

/* MouseDefaults 클래스의 draw함수를 현재 클래스의 함수인 것처럼 사용.

* 자바스크립트 기술문서의 apply() 함수 참고.

* MouseDefaults 클래스의 draw 함수는 마우스 이벤트(mousedown, mouseup 등)와

* 현재 클래스의 함수(defaultMouseDown, defaultMouseUp)와 연결 시킨다.

OpenLayers.Control.MouseDefaults.prototype.draw.apply(this, arguments);

K. 웹 화면에서 버튼 클릭 시 실행될 switchModeTo 함수를 정의한다.

switchModeTo: function(mode) {

if (mode != this.mode) {

//매개변수로 넘겨준 모드로 현재 객체의 모드를 변경함

this.mode = mode;

//모드에 따라 마우스 커서 모양 변경

switch (this.mode) {

case "zoomIn":

case "zoomOut":

this.map.div.style.cursor = "crosshair";

break;

default:

this.map.div.style.cursor = "";

break;

}

L. 지도조작 컨트롤이 활성화되어 있는 상태에서 지도 위에 마우스를 다운할 때의 이벤트

//마우스 다운 이벤트

defaultMouseDown: function (evt) {

//마우스 오른쪽 버튼을 막음

if (!OpenLayers.Event.isLeftClick(evt)) {

return;

}

this.mouseDragStart = evt.xy.clone(); //마우스 드래그 시작 지점 저장

this.performedDrag = false; //드래그 여부

switch (this.mode) {

case "zoomIn":

case "zoomOut":

case "default":

//드래그 시작 시 커서 모양 변경

this.map.div.style.cursor = "crosshair";

//확대, 축소 드래그 박스 생성

this.zoomBox = OpenLayers.Util.createDiv('zoomBox',this.mouseDragStart, null, null,

"absolute", "2px solid red");

//드래그박스(DIV) 스타일 지정

this.zoomBox.style.backgroundColor = "white";

this.zoomBox.style.filter = "alpha(opacity=50)"; // IE

this.zoomBox.style.opacity = "0.50";

this.zoomBox.style.fontSize = "1px";

this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;

//드래그박스(DIV) 등록

this.map.viewPortDiv.appendChild(this.zoomBox);

//마우스 드래그 여부를 true로 설정

this.performedDrag = true;

break;

default:

this.map.div.style.cursor = "move";

break;

}

//기본 마우스 드래그 이벤트 막음.

document.onselectstart = function() { return false; };

//이벤트 멈춤

OpenLayers.Event.stop(evt);

M. 지도조작 컨트롤이 활성화 되어 있을 때 마우스 이동 이벤트

//마우스 이동 이벤트

defaultMouseMove: function (evt) {

//드래그 중일 경우

if (this.mouseDragStart != null) {

switch (this.mode) {

//확대, 축소, 기본일 경우

case "zoomIn":

case "zoomOut":

case "default":

//마우스 드래그 시작 좌표와 현재 마우스 이벤트의 좌표의 차이를 구함

var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);

var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);

//드래그 박스의 width, height를 지정(위에서 구한 차이값과 1 중 큰 값)

this.zoomBox.style.width = Math.max(1, deltaX) + "px";

this.zoomBox.style.height = Math.max(1, deltaY) + "px";

/*현재 마우스 이벤트 좌표가 마우스 드래그 시작 점 좌표 보다 작을 경우

드래그 박스의 시작 좌표를 현재 마우스 이벤트 좌표로 변경 */

if (evt.xy.x < this.mouseDragStart.x) {

this.zoomBox.style.left = evt.xy.x+"px";

}

if (evt.xy.y < this.mouseDragStart.y) {

this.zoomBox.style.top = evt.xy.y+"px";

}

break;

//이동일 때

default:

//드래그 시작 좌표와 현재 마우스 이벤트 좌표의 차를 구함

var deltaX = this.mouseDragStart.x - evt.xy.x;

var deltaY = this.mouseDragStart.y - evt.xy.y;

//map 객체의 width, height 값을 받아옴. size - OpenLayers.Size 객체변수

var size = this.map.getSize();

//중심 좌표(화면좌표)를 계산함

var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX, size.h / 2 + deltaY);

//화면 좌표를 지도 좌표로 변환함

var newCenter = this.map.getLonLatFromViewPortPx( newXY );

//변환한 지도좌표를 기준으로 화면을 이동함.

this.map.setCenter(newCenter, null, true);

//드래그 시작 좌표를 현재 마우스 이벤트 좌표로 할당

this.mouseDragStart = evt.xy.clone();

}

//드래그 여부 true

this.performedDrag = true;

}

N. 마우스 이동 이벤트 도중 마우스가 지도 영역을 벗어났을 때의 이벤트

//마우스 아웃 이벤트

defaultMouseOut: function (evt) {

if (this.mouseDragStart != null

&& OpenLayers.Util.mouseLeft(evt, this.map.div)) {

if (this.zoomBox) {

//드래그 박스 삭제

this.removeZoomBox();

}

//드래그 여부 초기화

this.mouseDragStart = null;

}

O. 지도조작 컨트롤이 활성화 되어 있을 때 마우스 업 이벤트

//마우스 업 이벤트

defaultMouseUp: function (evt) {

if (!OpenLayers.Event.isLeftClick(evt)) {

return;

}

switch (this.mode) {

case "zoomIn":

case "zoomOut":

case "default":

//zoomBoxEnd 함수 실행

this.zoomBoxEnd(evt);

break;

case "pan":

//드래그 여부에 따른 이동

if (this.performedDrag) {

/* map 클래스의 setCenter 함수.

* 첫번째 매개변수(OpenLayers.LonLat 객체)를 중심으로 지도를 이동

* map 클래스의 center 프로퍼티 - 지도의 중심 좌표를 나타냄

this.map.setCenter(this.map.center);

}

else {

/* map 클래스의 getLonLatFromViewPortPx 함수.

* 화면 좌표의 x, y 값을 OpenLayers.LonLat 객체(지도좌표 X, Y)로 변환

this.map.setCenter(this.map.getLonLatFromViewPortPx(evt.xy));

}

break;

}

//이벤트, 변수, 스타일 초기화

document.onselectstart = null;

this.mouseDragStart = null;

this.map.div.style.cursor = "default";

P. 마우스 업 이벤트의 확대, 축소, 기본에서 사용하는 zoomBoxEnd 함수

zoomBoxEnd: function(evt) {

if (this.mouseDragStart != null) {

//드래그 영역이 5픽셀 이상일 때

if (Math.abs(this.mouseDragStart.x - evt.xy.x) > 5 || Math.abs(this.mouseDragStart.y - evt.xy.y) > 5) {

//마우스 드래그 시작 위치의 지도 좌표 값

var start =this.map.getLonLatFromViewPortPx(this.mouseDragStart);

//마우스 드래그 종료 위치의 지도 좌표 값

var end = this.map.getLonLatFromViewPortPx(evt.xy);

//드래그 영역 상단 값

var top = Math.max(start.lat, end.lat);

//드래그 영역 하단 값

var bottom = Math.min(start.lat, end.lat);

//드래그 영역 좌측 값

var left = Math.min(start.lon, end.lon);

//드래그 영역 우측 값

var right = Math.max(start.lon, end.lon);

//Bounds 객체 생성 및 할당

var bounds = new OpenLayers.Bounds(left, bottom, right, top);

if (this.mode == "zoomIn") {

//드래그한 영역으로 확대

this.map.zoomToExtent(bounds);

}

else {

if (this.mode == "zoomOut") {

//드래그 영역의 줌 영역에서 현재의 줌 영역 값을 뺌

var zoomOutTemp = this.map.getZoomForExtent(bounds) -this.map.getZoom();

//축소할 줌 값이 0일 경우 1로 지정

if(zoomOutTemp == 0) zoomOutTemp = 1;

//드래그한 영역의 중심점을 기준으로 영역 축소

this.map.setCenter(bounds.getCenterLonLat(),this.map.getZoom() - zoomOutTemp);

}

else if (this.mode == "default") {

//마우스를 위로 드래그 했을 경우

if (start.lat - end.lat < 0) {

//드래그 영역의 줌 영역에서 현재의 줌 영역 값을 뺌

var zoomOutTemp = this.map.getZoomForExtent(bounds) -this.map.getZoom();

//축소할 줌 값이 0일 경우 1로 지정

if(zoomOutTemp == 0) zoomOutTemp = 1;

//드래그한 영역의 중심점을 기준으로 영역 축소

this.map.setCenter(bounds.getCenterLonLat(),this.map.getZoom() - zoomOutTemp);

}

//마우스를 아래로 드래그 했을 경우

else {

//드래그한 영역으로 확대

this.map.zoomToExtent(bounds);

}

} else {

//클릭한 점의 지도 좌표 반환

newCenter = this.map.getLonLatFromViewPortPx(evt.xy);

//반환한 점의 좌표를 기준으로 확대.

if(this.mode == "zoomIn") {

this.map.setCenter(newCenter, this.map.zoom + 1);

}

//반환한 점의 좌표를 기준으로 축소.

else if(this.mode == "zoomOut") {

this.map.setCenter(newCenter, this.map.zoom - 1, true);

}

//반환한 점의 좌표를 기준으로 이동.

else {

this.map.setCenter(newCenter);

}

this.removeZoomBox();

}

Q. zoomBoxEnd 함수 처리 후 호출 하는 removeZoomBox 함수

removeZoomBox: function() {

//드래그 박스 지움

this.map.viewPortDiv.removeChild(this.zoomBox);

this.zoomBox = null;

R. 지도조작 컨트롤을 그대로 사용할 경우 모드와 상관없이 더블클릭 시 확대가 되는 것을 막음

//더블클릭 시 확대 되는 것을 막음

defaultDblClick: function (evt) {

return;

3. 이전, 다음 컨트롤

A. 지도에 이전, 다음 컨트롤을 사용하기 위해서OpenLayers.Control.NavigationHistory 클래스를 사용한다.OpenLayers.Control.NavigationHistory 클래스는 지도를 이동, 확대, 축소할 때의 정보를 배열에 저장하고 이전, 다음 영역으로 이동하는 컨트롤을 생성하는 기능이 있다.

B. NavigationHistroy 컨트롤 등록 및 사용에 사용할 전역 변수를 선언한다.

var NavHistoryControl;

C. NavigationHistroy 컨트롤 생성하고 Map 객체에 추가한다.

//NavigationHistory 컨트롤 생성

NavHistoryControl = newOpenLayers.Control.NavigationHistory();

//NavigationHistory 컨트롤 등록

giMap.addControl(NavHistoryControl);

D. body 영역 아래에 지도조작 컨트롤을 활성화하기 위한 버튼을 생성한다.

E. window.onload 이벤트 시에 버튼 엘리먼트에 onclick 이벤트에 이전, 다음 기능을 등록한다. NavigationHistory 객체의 previeousTrigger 함수는 이전 영역으로 이동하는 기능을 하고 nextTrigger 함수는 다음 영역으로 이동하는 기능을 한다.

window.onload = function() {

document.getElementById("btnPrev").onclick = function() {

//이전 영역으로 이동한다.

NavHistoryControl.previousTrigger();

};

document.getElementById("btnNext").onclick = function() {

//다음 영역으로 이동한다.

NavHistoryControl.nextTrigger();

};

[출처] OpenLayers|작성자 유노

저작자표시

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

티스토리 뷰

[자바스크립트 - OpenLayers] 오픈레이어스

티스토리툴바