openlayers

기본지도

와따개발블로그 2020. 1. 29. 23:23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
 
.map {
    height: 939px;
    width: 100%;
}
</style>
<title>CreateMap</title>
</head>
<body>
    <div class="map" id="map"></div>
    <%--     <script src="<c:url value="/resources/js/map.js" />"></script> --%>
    <script>
        var map = new ol.Map({
            target : 'map',
            layers : [ new ol.layer.Tile({
                source : new ol.source.OSM()
            }) ],
            view : new ol.View({
                center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
                zoom : 4
            })
        });
    </script>
</body>
</html>
 
 
 
 
  
 

24줄 : Openlayers Map 객체를 만듭니다.

25줄 : 지도 객체를 연결하기 위해 <div> 지도 객체가 target인수로 사용되며 값은 id="map"입니다.

26줄 : layers:[]는 배열 맵 가능한 층의 목록을 정의하는데 사용됩니다. 레이어는 소스를 포함하는 유형(이미지,타일 또는 벡터)로 정의됩니다. 

29줄 : 뷰에서는 지도의 중심, 해상도 및 회전을 지정할 수 있습니다. 

30줄 : 지정된 좌표가 경도 / 위도 좌표(EPSG:4326)임을 알 수 있습니다.

- ol/layer/Tile : 타일 이미지를 제공하는 소스를 렌더링 합니다.

- ol/layer/Image : 맵 이미지를 제공하는 소스를 렌더링 합니다.

- ol/layer/Vector : 벡터 데이터를 렌더링 합니다.

-ol/layer/VectorTile - 벡터 타일 데이터를 렌더링 합니다.

이렇게 가장 기본인 Openlayers 지도를 만들어 보았다.