openLayers 기본 지도 & Draw

vue3 & OpenLayers

 

<template>
  <div id="map" class="map"></div>
  <div class="row">
    <div class="col-auto">
        <span class="input-group">
          <label class="input-group-text" for="type">Geometry type:</label>
          <select v-model="selectedType" @change="onTypeChange">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
          </select>
          <button class="v-btn" id="undo" @click="undoLastPoint">Undo Last Point</button>
        </span>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import Draw from 'ol/interaction/Draw.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer} from 'ol/layer.js';
import {XYZ} from "ol/source";
import VectorLayer from "ol/layer/Vector";

// 필요한 데이터와 메소드를 Composition API로 정의
const selectedType = ref('None');
const draw = ref(null);
const map = ref(null);
const source = new VectorSource({ wrapX: false });

// 기본적인 openlayers OSM 타일레이어
/*const raster = new TileLayer({
  source: new OSM(),
});*/

// Draw 를 하기 위해 벡터레이어 깔기
const vector = new VectorLayer({
  source: source,
});

// 베이스로 쓸 타일 레이어 설정
const geobang = new TileLayer({
  source: new XYZ({
    url: 'http://www.khoa.go.kr/oceanmap/발급받은키/BASEMAP_3857/{z}/{y}/{x}/basemapWMTS.do'
  }),
})

const removeInteraction = () => {
  if (draw.value && map.value) {
    map.value.removeInteraction(draw.value);
  }
};

const addInteraction = () => {
  if (selectedType.value !== 'None') {
    draw.value = new Draw({
      source: source,
      type: selectedType.value,
    });
    map.value.addInteraction(draw.value);
  }
};

const onTypeChange = () => {
  removeInteraction();
  addInteraction();
};

// Remove the last point of a line or polygon
const undoLastPoint = () => {
  if (draw.value) {
    draw.value.removeLastPoint();
  }
};

onMounted(() => {
  // Map 객체 초기화
  map.value = new Map({
    layers: [
      geobang, vector
    ],
    target: 'map',
    view: new View({
      center: [14126669.41589247, 4493404.190498611],
      zoom: 7,
    }),
  });

  addInteraction();
});
</script>

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

#map {
  height: 750%;
}
</style>

 

기본적으로 뜨는 지도 여기서 지도는 해아름(개방해)을 사용함

기본 오픈레이어 지도를 사용하려면 OSM 사용하면됨

 

왼쪽 최하단에 타입을 변경하면 라인, 라인스트링, 폴리곤, 사이클 등 지도에 도형을 그릴 수 있음

텍스트 같짐만 버튼임;; 설정은 따로 하면될듯

 

https://openlayers.org/

OpenLayers - Welcome