[OpenLayers] OpenLayers 이용하여 맵띄우기

OpenLayers에 들어가서 js파일과 css파일을 넣어준다.

map.jsp

head

<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">

// 필자는 7.4.0버전을 다운로드를 해서 사용하였다!
<script type="text/javascript" src="plugins/openLayers/ol.js"></script>
<link rel="stylesheet" href="plugins/openLayers/ol.css"/>

body

<div id="map" class="map"></div>
<script type="module" src="js/sampleMap/map.js"></script>

map.js

/* 지도 중심 좌표 */
var olCenter = [126.000, 36.000]; // 임의로 넣은 경도(ing x), 위도(lat y)

/* 지도 기본 타일 설정 */
var olLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://mt3.google.com/vt/lyrs=m&hl=kr&x={x}&y={y}&z={z}'
    })
});

/* 지도 기본 뷰 설정 */
var olView = new ol.View({
    center: olCenter,
    projection:'EPSG:4326',
    zoom: 15,
    minZoom : 6,
    maxZoom : 19,
});

/* 지도 생성 */
var olMap = new ol.Map({
    overlays: [overlay],
    target: 'map',  // html에 존재하는 div영역의 id 이름
    view: olView,
    moveTolerance: 5
});

여기서는 js 파일을 넣어줄때 꼭 type을 module로 넣어줘야한다

맵을 띄우는건 간단하면서 복잡했는데 leaflet을 먼저 경험해본 사람으로써..
뭔가가 훨씬 많지만 약간 복잡한 느낌..? 그걸 마커 띄울때 더 실감했다

참고문서
https://mygameprogamming.tistory.com/70