[openlayers] v-world + vuejs + openlayers를 이용해보기

요구사항

: vuejs환경에서 v-world 맵과 openlayers를 이용하기

 

 

1. v-world에 회원가입을 하고 인증키를 발급 받는다.​

https://www.vworld.kr/v4po_main.do

브이월드

​

오픈 api를 사용하는데 내가 필요한 것은 아래의 지도였다.

​

 

2. 필요한 라이브러리 받기

 

나는 yarn을 사용해서 아래 처럼 받았다.

yarn add ol ol-ext proj4 // npm install ol ol-ext proj4

ol-ext의 경우 좀 더 다양한 기능을 사용하게 해준다고 해서 받았고

proj4의 경우 openlayers에 EPSG:5186 좌표계를 사용해야 해서 추가한 라이브러리 였다 (ol에서 저 좌표계를 인식못하는것 같더라...)

​

 

3.

<script setup>
import { onMounted, ref } from "vue";
import { Map as OlMap, View } from "ol";
import { defaults } from "ol/control";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { XYZ } from "ol/source";
import proj4 from "proj4/dist/proj4";
import { register } from "ol/proj/proj4";

const API_KEY = "발급받은 api key";

// 5186 좌표 인식하게 설정
proj4.defs([
  [
    "EPSG:5186",
    "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs",
  ],
]);

register(proj4);

// 지도를 담는 ref
const map = ref(null);

// 브이월드 레이어 깔기
const setLayer = () => {
  map.value = new OlMap({
    target: map.value,
    controls: defaults({
      attribution: false,
      zoom: false,
      rotate: false,
    }),
// 나는 위성지도가 필요해서 설정했다. Satellite의 경우 마지막 확장자가 .png가 아니라 .jpeg다!
// * maxZoom: 19
    layers: [
      new TileLayer({
        title: "VWorld Map",
        type: "Satellite",
        zIndex: 0,
        source: new XYZ({
          url: `https://api.vworld.kr/req/wmts/1.0.0/${API_KEY}/Satellite/{z}/{y}/{x}.jpeg`,
          maxZoom: 19,
        }),
      }),
    ],
    view: new View({
      center: fromLonLat([127.000042, 37.558324], "EPSG:5186"),
      zoom: 19,
      projection: "EPSG:5186",
    }),
  });
};


onMounted(() => {
  setLayer();
});
</script>
<template>
  <div class="map__wrapper">
      <div class="map" ref="map"></div>
   </div>
</template>
<style scoped>
.map__wrapper {
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map {
  width: 100%;
  height: 100%;
}
</style>