Projection in openlayers and Map properties

kimdong215·2021년 7월 20일
0

이번에는 map의 좌표계, 위치 및 줌 기능에 대해서 소개하겠다.

Section 6: Introduction to Openlayers

Projection in openlayers and Map properties

이번에 작성한 파일경로는 아래와 같다.

바로 코드부터 적어본다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Importing openlayers library-->
    <link rel="stylesheet" href="./assets/ol/ol.css" type="text/css">
    <script src="./assets/ol/ol.js"></script>

    <!-- Custom style file-->
    <link rel="stylesheet" href="./style.css" type="text/css">

    <!--Proj4js-->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.4/proj4.js"></script> -->

    <title>Open layers basic</title>
</head>
<body>
    <h1> OpenLayers map</h1>
    <div id="mymap" class="map"></div>

    <script src="./main.js"></script>

</body>
</html>

main.js


// Define a view
var view = new ol.View({
    projection:'EPSG:4326',
    center: [127,37.5], //ol.proj.fromLonLat([127,37.5]), //Coordinates of center
    zoom: 10 //zoom level of map
})

// Define basemap
var OSMBaseMap = new ol.layer.Tile({
    source: new ol.source.OSM()
});

// Define array of layers
var layerArray = [OSMBaseMap];

// Define our map
var map = new ol.Map({
    target:'mymap',
    layers: layerArray,
    view: view
});

style.css

.map {
    height: 600px;
    width: 100%;
  }

result

크롬이나 엣지에서 F12(개발자도구)를 켜서,
콘솔에다가 map을 치면 하위의 element들을 볼 수 있다.
map.getView().getCenter() 하면 지금 켜져있는 지도의 센터 좌표
map.getView().getZoom() 하면 zoom level이 나오고,
map.getView().getProjection() 하면 좌표계(epsg)가 나옴.

참고로
pro4js에서 js 라이브러리를 따올 수 도 있고,
epsg.io에서 다양한 좌표계에 대한 pro4js도 따올 수 있다.

끝!

다음 포스팅은 raster 레이어를 표출해봐야지

profile
Junior GIS/RS

0개의 댓글