커서가 위치한 곳의 좌표를 표출하기.

OpenLayers에서 지도상 특정 위치에 대한 좌표를 가져오는 방법 중, 가장 기본적인 마우스 위치에 대한 지도 좌표 보는 방법.
OpenLayers에서 기본적으로 제공하는 MousePosition이라는 컨트롤 모듈을 사용하면 됨.

예제를 진행하기전에,
OpenLayers 공식 사이트에서는 import를 사용하는 문법을 추천함.
But, 복습 겸 간단하게 코드를 남기는 중이니 CDN 방식으로 하겠음.

ES6의 import 문은 다음과 같은 방법으로 대체시키면 됨.

// import Map from 'ol/Map';
const Map = ol.Map;

// import View from 'ol/View';
const View = ol.View;

// import {defaults as defaultControls} from 'ol/control';
const defaultControls = ol.control.defaults;

1. 좌표값을 표출하는 div 선언

<div id="mouse-position"></div>

2. 마우스 좌표를 가져오는 OpenLayers의 모듈 선언.

let mousePositionCtrl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:4326',
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: ' '
});

이전 예제에서 두 단계만 추가해주면 div 안에 마우스 위치의 좌표를 가져올 수 있음.

그런데 마우스의 좌표가 쌩 숫자임...
좌표계라는 개념이 있고, 좌표계의 종류는 우리나라에서 사용하는 좌표계만 30개 정도 되는 듯?
좌표계에 대한 정리는 여기에 있음.

3. 결과 화면

전체 코드 보기

# HTML에 GitHub Contribution Calendar 삽입하는 방법.

<!-- Prepare a container for your calendar. -->
<script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

이 소스코드에서 `"your-usernamne"`부분에 github 이름을 넣어준다.

결과는 내 블로그 하단에...

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

원본 :

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