Introduction to openlayers

kimdong215·2021년 7월 20일
0

본격적으로 WebGIS에 대해서 메모해봐야지.
우선 openlayers에 대한 소개부터 시작한다.

Section 6: Introduction to Openlayers

Introduction to openlayers

Openlayer 등의 이론에 대한 내용은 여기에 잘 나와있다.

코드 중심으로 진행할 예정이다.

Map

Map은 View / Layers / Interaction 으로 구성된다.

View = Center / Zoom / Projection
Layers = Layer type / Source type / Styling
Interaction = Map.on / Interaction / Overlays

위와 같이 대충 적어보았다.

아 그리고 Openlayers는 오픈소스이다!

Quick start

바로 간단하게 코드를 짜보자.

vscode에서 live server를 이용하였다.

시작이니깐 하나의 .html 파일로 작성하여 보았다.

basicOfOl.html

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css">
    <style>
      /* map관련 설정 */
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>

  <body>
    <h2>First OpenLayers Project - OSM</h2>
    <div id="mymap" class="map"></div>
    <script type="text/javascript">
      // map의 target은 html의 id이다. 여기서는 mymap이 됨.
      var map = new ol.Map({
        target: 'mymap',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),  //center좌표
          zoom: 4  //zoom level
        })
      });
    </script>
  </body>
</html>

Result

근데 hrefcss같은거 url로 받으면 난중에 스트레스 받을것 같다.

그러니깐 여기에서 Get the code!에서 다운받아서 사용한다.

근데 기왕 코드짰으니깐 css쪽의 map 크기 정도면 조절해보면서 대충 파악해보자.
js영역의 좌표 등과 관련된 내용은 다음에 다룰 것이다.

마지막으로 사실 돌아가기만 하면 장땡이긴해서 별 문제가 없어보이긴 한다.

그런데 실제 프로젝트는 정말 복잡할 것이고, 위와 같이 한 파일 안에 모두 담는 것은 스트레스를 많이 받을 것이다.
추후에 쓰는 글의 경우, 모든 파일을 분리해서 소개할 것이다.

profile
Junior GIS/RS

0개의 댓글