OpenLayers - 지도 띄우는 게 목적

OpenLayers의 구성에는 많은 옵션들이 있지만 나는 정말 기본 띄우기를 목적으로 글을 작성하기로 했다.
일단 기본 목적인 띄우기를 성공하면 다른 옵션들을 찾는 게 더 재밌는 것 같다.

1. openlayers 관련 파일들 가져오기!

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

2. 지도를 띄우기 위해서 map을 선언해야 한다.

<div id="map" style="width:100%; height:1000px;"></div>

<script>
	let map = new ol.Map({
        target: 'map', // map을 띄울 영역 id
        layers: [
            mapLayer
        ],
        view: view
    });
</script>

3. 위의 map을 선언하면 layers와 view에 대한 변수가 없으니 당연히 오류가 날 것이다!

<script>
	let mapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url : 'http://api.vworld.kr/req/wmts/1.0.0/vworldApiKey/Base/{z}/{y}/{x}.png',
            crossOrigin: "Anonymous",
            minZoom: 8,
            maxZoom: 20
        })
    });
</script>

map에 대한 Tile layer을 선언한다.
대한민국 지도만 보여주고 싶어서 vworld api를 활용했다. vworld에서 제공하는 맵의 테마도 여러가지여서 유용하게 쓸 수 있다.

<script>
	const view = new ol.View({
        projection: 'EPSG:3857',
        center: [14202780.630783081, 4312045.949313453],
        zoom: 20,
        minZoom: 8,
        maxZoom: 20
    });
</script>

view로 지도의 위치를 어느 곳을 띄울지를 잡아준다.
projection(좌표계)의 종류는 정말 많지만 openlayers는 EPSG:3857을 기본 좌표계로 사용한다.