# 공간데이터 웹 서비스

## OpenLayers

1. 웹 브라우저 상에 지도 데이터를 시각화 및 조작이 가능한 JavaScript 라이브러리
2. OSM (OpenStreetMap) 라는 오픈소스형 무료 지도 서비스 이용
   * OSM의 시작지인 런던은 가로수 하나까지도 한땀한땀 노드로 다 표현을 해놓았을 정도로 지도 데이터 질이 매우 좋다고 합니다.
   * 주요 대도시들은 구글맵보다도 더 정확하고 자세한 표현합니다.
3. 지도 기반의 GIS (geographic information system) 프로젝트 - GeoServer, PostgreSQL 연동으로 개발

### 특징

1. **타일 레이어**
   * OSM, Bing, MapBox, Stamen 및 찾을 수 있는 기타 XYZ 소스에서 타일을 가져옵니다. 
   * OGC 매핑 서비스 및 untiled 레이어도 지원됩니다.
2. **벡터 레이어**
   * GeoJSON, TopoJSON, KML, GML, Mapbox 벡터 타일 및 기타 형식의 벡터 데이터를 렌더링합니다.
3. **Cutting Edge, Fast & Mobile Ready**
   * Canvas 2D, WebGL 및 HTML5의 모든 최신 기능을 활용합니다. 
   * 즉시 사용 가능한 모바일 지원
   * 필요한 구성 요소만으로 경량 사용자 지정 프로필을 구축 가능합니다.
4. **Easy to Customize and Extend**
   * 간단한 CSS로 지도 컨트롤의 스타일을 지정할 수 있습니다.
   * 다양한 수준의 API에 연결하거나 타사 라이브러리를 사용하여 기능을 사용자 지정하고 확장합니다.

### 구조

<figure><img src="https://534446899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEANFIvbqPGRb7mygSUbd%2Fuploads%2FWxr3HHZ88d3HcifXZORe%2Fimage.png?alt=media&#x26;token=c22ea289-13ec-4897-83ee-ac727a60b670" alt=""><figcaption><p>OpenLayers 구조</p></figcaption></figure>

Openlayers에서 지도서비스가 나타나기 위해서는 Map이 핵심요소로 필요합니다.

Map은 지도화면에 배경지도(BingMaps, GoogleMap, Kakao, Naver, OSM, 브이월드) 또는 배경지도 위에 WMS/WFS 레이어를 표출하기 위해 필요한 필수 객체 입니다.

Map을 사용하여 지도를 화면에 표출하기 위해서는 Layer와 View, Interaction, Controls 와 같은 요소가 필요합니다.

* &#x20;Layer는 배경지도 또는 레이어를 표출하기 위해 사용하는 객체입니다. 하나 이상의 레이어가 필요하여 Map에서 배열로 사용됩니다.
* View는 해상도, 화면 레벨, 좌표 등 지도의 시각적 효과에 대한 변수들을 정의합니다.
* Controls는 화면에 고정된 위치에 사용되는 버튼등에 이벤트를 적용하여 회전, 위치이동 등의 이벤트를 제공합니다.&#x20;
* Interaction은 마우스, 키보드 등의 이벤트로 효과를 제공합니다. (true, false)

## Leaflet

리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리입니다. HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원합니다.

리플릿은 GIS 배경지식이 없는 개발자들이 공용 서버에 호스팅되는 타이틀 웹 맵을 선택적 타일 오버레이와 함께 매우 쉽게 표출할 수 있게 합니다. GeoJSON 파일로부터 피처 데이터(feature data)를 로드하고 스타일을 입히고 상호작용 레이어를 만들 수 있습니다.(예: 클릭할 때 팝업 포함 마커 등)

### 특징

Leaflet은 기본 사항이 완벽하게만 작동하도록 만드는 데 중점을 둡니다 .

1. **사용 가능한 레이어**
   * 타일 레이어, WMS
   * 마커, 팝업
   * 벡터 레이어 : polylines, polygons, circles, rectangles
   * Image overlays
   * GeoJSON
2. **사용자 정의 기능**
   * 간편한 스타일 변경을 위한 순수한 CSS3 팝업 및 컨트롤
   * 이미지 및 HTML 기반 마커
   * 사용자 지정 맵 레이어 및 컨트롤을 위한 간단한 인터페이스
   * 사용자 지정 지도 투영 ( `EPSG:3857/4326/3395`기본 제공)
   * 기존 클래스 확장을 위한 강력한 OOP 기능
3. **성능 특징**
   * 모바일의 하드웨어 가속은 네이티브 앱처럼 부드럽게 느껴집니다.
   * CSS3 기능을 활용하여 패닝 및 확대/축소를 정말 부드럽게 만들기
   * 동적 클리핑 및 단순화가 포함된 스마트 폴리라인/폴리곤 렌더링으로 매우 빨라집니다.
   * 필요하지 않은 기능을 생략하기 위한 모듈식 빌드 시스템
   * 모바일에서 탭 지연 제거
4. **시각적 특징**
   * 확대/축소 및 이동 애니메이션
   * 타일 ​​및 팝업 페이드 애니메이션
   * 마커, 팝업 및 맵 컨트롤을 위한 매우 멋진 기본 디자인
   * Retina 해상도 지원

## OpenLayers vs Leaflet

<figure><img src="https://534446899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEANFIvbqPGRb7mygSUbd%2Fuploads%2FsyFxEGs4nvOkilQ3spLS%2Fimage.png?alt=media&#x26;token=40a1a8d6-4a14-4d58-8933-97549842cbf5" alt=""><figcaption></figcaption></figure>