좌표계 (Coordinate System)

좌표계는 공간상의 한 점의 위치를 표시라는 숫자들의 순서 쌍인 좌표를 정하기 위한 체계로,
원점과 기준 길이, 기준 축이나 기준선들의 집합을 통틀허 이르는 말임.
서로 수직인 직선을 기준 축으로 갖는 Rectangular Coordinate System이(직교 좌표계, 평면 좌표계 또는 데카르트 좌표계라고도 함) 가장 널리 쓰이고 그 밖에 곡선 좌표계들이 있음.
데카르트는 천장에 붙은 파리의 위치를 표현하기 위해 고안 했다고 함.

좌표계의 종류

  • 극 좌표계 (Polar Coordinate System)
  • 원기둥 좌표계 (Cylindical Coordinate)
  • 구면 좌표계 (Spherical Coordinate)
  • 동차 좌표계 (Homogeneous Coordinate)
  • 세계 지구 좌표 시스템 (World Geodetic System : WGS )

EPSG:3857

  • [14541934.699146198, 4291217.769314549]와 같은 형식
  • Google Map, Open Street Map에서 사용
  • 미터 단위를 사용함
  • Open Street Map과 OpenLayers가 밀접한 관계에 있기 때문에, OpenLayers의 기본 좌표임.

EPSG:4326 -> WGS84(라고도 함)

  • [130.63242200911046, 35.93162949347317]와 같은 형식
    • [±180 , ±90]
  • Google Earth에서 사용, 거의 모든 GPS에서 사용.
  • 소수점 단위를 사용함 (decimal degrees)

경도와 위도

좌표는 경도(Longtitude)와 위도(Latitude) 로 이루어 져 있음.

  • 경도 : X축 이라고 보면 됨.(동경, 서경)
    • 지구를 세로선으로 나눈것.
    • 영국의 그리니치 천문대를 기준으로 동경 180도, 서경 180도로 나눔.
    • 동경 180도와 서경 180도가 만나는 세로선이 날짜 변경선이 됨.
  • 위도 : Y축 이라고 보면 됨.(북위, 남위)
    • 적도를 0도로 기준잡고 지구를 남과 북으로 나누어서 북위, 남위 각각 0 ~ 90도로 구분함.

순서가 헷깔릴 땐 경위도, lola 로 기억하면 됨.

출처

  • 위키 백과
  • 네이버 물리학 백과
  • BizGIS
728x90
반응형

'ETC > GIS' 카테고리의 다른 글

[OpenLayers] 마우스 커서 위치에 대한 지도 좌표 보기  (0) 2019.11.15
OpenLayers로 지도 띄우기.  (1) 2019.11.08

OpenLayers를 사용해서 HTML상에 지도를 띄우는 방법.

1. OpenLayers JS 파일과 CSS파일을 Include 한다.

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">

선택 사항으로, 만약 지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script를 Include 하기전에 다음 파일을 Include해 준다.

<!-- 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>

2. 지도가 들어갈 div를 만들어 준다. 

<div id="map" class="map"></div>

3. 화면에 보여질 지도의 크기를 CSS로 지정해 준다.

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

4. javascript로 지도를 띄워준다.

  let map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })
  });

5. 결과 화면.

 

 

 

 

 

 

6. JS 코드 분석.

 - OpenLayers Map 객체를 불러 온다.

let map = new ol.Map({ ... });

 - 지도 객체를 <div>에 연결 하기 위한 설정이다. target의 인자로 <div>의 id값을 지정해 준다.

    target: 'map'

 - layers : [ ... ] 배열은 지도에 사용하는 레이어의 목록을 정의하는 리스트다. 
기본적으로 Tile 레이어를 사용한다.

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

OpenLayers에서 레이어는 소스를 포함하는 유형(벡터, 이미지, 타일)으로 정의된다.

 - View는 지도가 보여줄 중심좌표, 축척, 회전을 지정할 수 있다. 
(기본적인 지도는 축척과 중심좌표만 설정한다)

    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })

 

전체 코드 보기 :

https://github.com/JeahaOh/OpenLayersStudy/tree/master/05%20Revision%20OL/01%20Map

 

JeahaOh/OpenLayersStudy

Open Layers JS 5.3 버전을 학습해 보자. Contribute to JeahaOh/OpenLayersStudy development by creating an account on GitHub.

github.com

원본 :

https://openlayers.org/en/latest/doc/quickstart.html

728x90
반응형

'ETC > GIS' 카테고리의 다른 글

좌표계 간략 정리  (0) 2019.11.22
[OpenLayers] 마우스 커서 위치에 대한 지도 좌표 보기  (0) 2019.11.15

+ Recent posts