vue3-openlayers 설치 및 사용법

vue3-openlayers

Vue3는 사용자 인터페이스 구축에 사용되는 JavaScript 프레임워크인 반면 OpenLayers는 웹에서 대화형 지도를 표시하기 위한 강력한 오픈 소스 라이브러리입니다. OpenLayers와 함께 Vue3를 사용할 때 맵 구성 요소를 생성하고 Vue 애플리케이션에 통합할 수 있습니다.

설치

npm install ol ol-ext ol-contextmenu  # install the peerDependencies
npm install vue3-openlayers           # install this library

Usage

import { createApp } from "vue";
import App from "./App.vue";

import OpenLayersMap from "vue3-openlayers";
import "vue3-openlayers/styles.css"; // vue3-openlayers version < 1.0.0-*

const app = createApp(App);
app.use(OpenLayersMap /* options */);

app.mount("#app");

설명

ol-map

ol-map 컴포넌트는 Vue 애플리케이션의 지도 컨테이너를 나타냅니다. OpenLayers 맵을 초기화하고 웹 페이지에 렌더링하는 역할을 합니다.

<template>
  <ol-map :options="mapOptions">
    <!-- 여기에 다른 맵 구성요소 추가 -->
  </ol-map>
</template>

ol-view

중심점, 확대/축소 수준, 회전 및 투영을 포함하여 지도의 보기 설정을 정의합니다. 의 하위 구성요소 ol-map이며 지도의 초기 보기를 구성하는 데 사용됩니다.

<template>
  <ol-map :options="mapOptions">
    <ol-view :options="viewOptions"></ol-view>
    <!-- 여기에 다른 지도 구성요소 추가 -->
  </ol-map>
</template>

ol-overlay

사용자 지정 HTML 요소를 지도 위에 오버레이로 추가할 수 있습니다. 오버레이는 팝업, 도구 설명 또는 사용자 정의 UI 요소와 같은 추가 정보를 표시하는 데 사용할 수 있습니다.

<template>
  <ol-map :options="mapOptions">
    <ol-view :options="viewOptions"></ol-view>
    <!-- 지도에 사용자 지정 내용을 표시하기 위한 오버레이 구성 요소 추가 -->
    
    <ol-overlay :options="overlayOptions">
     <!--사용자 지정 HTML 컨텐츠를 여기에 추가 -->
      <div>Custom overlay content</div>
    </ol-overlay>

   <!-- 여기에 다른 맵 구성요소 및 도면층을 추가  -->
  </ol-map>
</template>

ol-geolocation

지도에서 지리적 위치 기능을 처리하기 위한 지원을 제공합니다. 사용자의 현재 위치를 추적하여 지도에 표시할 수 있습니다.

<template>
  <ol-map :options="mapOptions">
    <ol-view :options="viewOptions"></ol-view>

    <!-- 지리적 위치 구성 요소를 추가 -->
    <ol-geolocation :options="geolocationOptions"></ol-geolocation>

    <!-- 여기에 다른 지도 구성요소 및 도면층 추가 -->
  </ol-map>
</template>

ol-projection-register

OpenLayers에 사용자 정의 프로젝션을 등록하는 데 사용됩니다. 투영은 특히 좌표계가 다른 다양한 소스의 데이터를 처리할 때 맵에 데이터를 올바르게 표시하는 데 필수적입니다.

<template>
  <ol-map :options="mapOptions">
    <ol-view :options="viewOptions"></ol-view>
    <!-- 사용자 지정 투영 구성 요소 등록 -->
    
    <ol-projection-register :projections="customProjections"></ol-projection-register>
  <!-- 여기에 다른 지도 구성요소 및 도면층 추가 -->
  </ol-map>
</template>

저작자표시

mj_devlog