정리노트/메모

24.06.04. 노트

망고고래 2024. 6. 4. 18:02

1. OpenLayers

2. EPSG

 

 

1. OpenLayers

OpenLayers: 지도를 표시하는 자바스크립트 라이브러리

OpenLayers - Welcome

 

OpenLayers - Welcome

A high-performance, feature-packed library for all your mapping needs.

openlayers.org

1)예제

Accessible Map (openlayers.org)

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>
</html>

 

(1)헤더

링크 삽입

<head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>

polyfill: 오래된 브라우저에서도 최신 웹 기능을 사용할 수 있게 함

 

스타일 지정

    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>

a 링크는 기본적으로 숨겨져있지만 포커스되면 표시된다.

(2)바디

html 요소

a 태그, 지도 영역, 줌인 줌아웃 버튼

    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>

 

지도 스크립트

전

    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>

 

일부

<script>
	//지도 객체 생성
    /*
    new ol.Map({
    	layers:
        
        target:
        
        controls:
        
        view:
    });    
    */
	var map = new ol.Map({	
        layers: [			//OpenStreetMap(OSM)의 타일 레이어 지도에 추가
          new ol.layer.Tile({	
            source: new ol.source.OSM()
          })
        ],
        
        target: 'map',		//지도가 표시될 html 요소 설정: id가 map인 요소
        
        //ol.control.defaults({...}): 지도에 추가할 기본 컨트롤 세트(확대/축소, 저작권 정보 등) 생성
        //다른 컨트롤 추가/제거 가능
        controls: ol.control.defaults({
        	//저작권 정보
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
          	//접을 수 없음: 항상 표시
            collapsible: false
          })
        }),
        
        //중심좌표, 확대 수준 설정
        view: new ol.View({
          center: [0, 0],	//경도 0, 위도 0
          zoom: 2
        })
      });

 

 

지도 객체 생성

①new ol.Map();

{}: ol.Map 클래스의 생성자에 전달되는 매개변수 객체. 지도 초기화에 필요한 설정 포함

    var map = new ol.Map({
                    layers:

                    target:

                    controls:

                    view:
                });

 

②layers

layers: [
	new ol.layer.Tile({
    	source: new ol.source.OSM()
    })
]

 

layers 속성을 통해 벡터 레이어, 타일 레이어, 이미지 레이어 등 다양한 유형의 레이어를 지도에 추가할 수 있다.

여기서는 타일 레이어를 추가했다.

  • ol.layer.Tile: 타일 기반의 레이어, 지도의 타일(정사각형 이미지) 표시. 웹 맵 서비스(WMS) 또는 오픈스트리트맵(OpenStreetMap) 같은 외부 소스에서 타일을 가져와 표시
  • ol.layer.Vector: 벡터 데이터. GeoJSON, KML 등의 벡터 데이터를 지도 위에 그림. 주로 지리적 객체(도로, 건물 등)를 상세하게 표현할 때 사용
  • ol.layer.Image: 단일 이미지를 지도 위에 표시하는 레이어. 대규모 이미지나 특정 지역의 고해상도 사진을 표시할 때 사용

예시

var map = new ol.Map({
  target: 'map', // 지도를 표시할 HTML 요소의 ID
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM() // OpenStreetMap 타일 소스
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]), // 초기 중심 좌표
    zoom: 4 // 초기 확대 수준
  })
});

 

ol.layer.Tile + ol.source.XYZ

var osmLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});

{a-c}: 타일 서버의 서브도메인 - Vworld 등의 api 사용

var osmLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [osmLayer],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

 

 

 

③target

target: 'map'

id가 map인 요소에 지도 표시

 

④controls

        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),

 

controls: 확대/축소 버튼, 지도 회전 컨트롤, 저작권 정보 표시 등 관리

new로 생성

  • ol.control.Attribution: 저작권 정보와 출처를 하단에 표시
  • ol.control.Fullscreen: 전체 화면 모드 전환 버튼 제공
  • ol.control.MousePosition: 마우스 커서의 현재 위치를 지리적 좌표로 표시
  • ol.control.OverviewMap: 작은 축척의 지도 제공
  • ol.control.Rotate: 지도의 북쪽을 가리키도록 회전하는 버튼 제공
  • ol.control.ScaleLine: 지도의 스케일을 나타내는 선 표시
  • ol.control.Zoom: 확대/축소 버튼 제공
  • ol.control.ZoomSlider: 슬라이더로 지도 확대/축소 레벨 조절 가능
  • ol.control.ZoomToExtent: 지도를 특정 영역 또는 전체 영역으로 확대/축소하는 버튼 제공

추가 예시

controls: ol.control.defaults().extend([
    new ol.control.ZoomSlider(),
    new ol.control.Rotate(),
    new ol.control.ScaleLine(),
    new ol.control.FullScreen()
  ])

 

⑤view

view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]), // 초기 중심 좌표
    zoom: 4 // 초기 확대 수준
  })

 

지도의 초기 중심점, 확대 수준, 투영법 등 전반적인 뷰 설정 정의

ol.View 객체의 주요 속성

  • center: 지도의 초기 중심점 설정. ol.proj.fromLonLat 함수로 경도와 위도를 좌표로 변환
  • zoom: 초기 확대 수준 설정. 값이 높을 수록 지도 확대
  • minZoom: 최소 확대 수준
  • maxZoom: 최대 확대 수준
  • projection: 지도의 투영법 설정. 기본값은 EPSG:3857(대부분의 웹 지도가 사용하는 Web Mercator 투영법)
  • rotation: 지도의 초기 회전 각도 설정(단위: 라디안)
  • extent: 지도의 가능한 경계 범위 설정. [minY, minY, maxX, maxY] 형식의 배열로 지정

view 속성을 사용한 지도 뷰 설정 예제

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([127.024612, 37.532600]), // 서울의 경도와 위도
    zoom: 10, // 초기 확대 수준
    minZoom: 5, // 최소 확대 수준
    maxZoom: 18, // 최대 확대 수준
    rotation: 0 // 초기 회전 각도
  })
});

 

추가 기능

  • view: 주어진 범위로 지도를 맞추는 메서드(특정 지역을 중심으로 지도를 확대/축소할 때 사용)
  • animate: 뷰의 속성을 애니메이션으로 변경. 부드럽게 확대/축소하거나 지도의 중심을 이동할 때 사용

 

ol.proj

지도의 좌표계, 투영 관리 모듈

※투영: 3차원의 지구를 지도에 2차원으로 나타냄

 

주요 기능

1. 좌표계 변환

var lonLat = [126.9784, 37.5665]; // 서울 시청의 경도, 위도
var mercator = ol.proj.transform(lonLat, 'EPSG:4326', 'EPSG:3857'); // WGS 84에서 웹 메르카토르로 변환

 

2. 좌표계 정보 조회

var projection = ol.proj.get('EPSG:3857');
console.log(projection.getCode()); // 'EPSG:3857'

 

3. 좌표계 등록

var view = new ol.View({
  center: ol.proj.fromLonLat([126.9784, 37.5665]), // 서울 시청의 경도, 위도를 웹 메르카토르 좌표로 변환
  zoom: 10,
  projection: 'EPSG:3857'
});

 

 

 

2. EPSG

EPSG(European Petroleum Surey Group): 좌표계, datum, 회전타원체(spheroid), Unit 등을 위해 표준 코드, EPSG 코드를 가진 측지 변수(geodetic parameter) 데이터베이스를 유지하는 조직

뭔 소리지...

EPSG 코드: 모든 지리적 객체(좌표계, 회전타원체, Unit 등)에 할당되는 고유 번호

 

주요 좌표계 종류의 EPSG 코드 및 proj4 문자열

한국 주요 좌표계 EPSG코드 및 proj4 인자 정리 :: OSGeo(Open Source GeoSpatial) 한국어 지부

 

좌표계 좌표계 세부 EPSG Code
전지구 좌표계 WGS84 경위도
- GPS가 사용하는 위경도 좌표계		 EPSG: 4326
EPSG: 4166
(Korean 1995)
구글 지도, 빙 지도, 야후 지도, 오픈스트리트맵(OSM) 등에서 사용 EPSG:3857(공식)
EPSG:900913(통칭)
Bessel 1841
한국과 일본에 맞는 지역 타원체를 사용한 좌표계		 EPSG:4004
EPSG:4162
(Korean 1985)
GRS80 경위도
- WGS84와 거의 유사		 EPSG:4019
EPSG:4737
(Korean 2000)
UTM(투영 좌표계) UTM2N(WGS84)
- 경도 120~126도 사이에서 사용		 EPSG:32652
UTM51N(WGS84)
- 경도 126~132도 사이에서 사용		 EPSG:32651

 

 

 

 

 

'정리노트 > 메모' 카테고리의 다른 글

ClassNotFoundException 해결 방법(ContextLoaderListener)  (0) 2024.06.17
24.06.11. 노트  (0) 2024.06.11
24.06.07. 노트  (0) 2024.06.07
24.06.05. 노트  (0) 2024.06.05
24.06.03. 노트  (0) 2024.06.03

'정리노트/메모'의 다른글

  • 현재글24.06.04. 노트

관련글

티스토리툴바