Projection in openlayers and Map properties
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 레이어를 표출해봐야지
Junior GIS/RS