vuejs 애플리케이션에 오픈레이어 통합

vuejs 애플리케이션에 오픈레이어 통합

Vuejs 어플리케이션에서 Openlayer를 통합한 경험이 있습니까?

Vuejs 앱에 레이어를 표시해야 합니다.

건배.

네, 현재 Vuejs와 OpenLayers 4로 기존 애플리케이션을 다시 쓰고 있습니다.앱에는 폼과 거의 전체 화면 맵이 있습니다(구글 맵의 라우팅 기능과 유사).

OL npm lib는 OpenLayer를 ES2015 파일로 공개하여 일반적인 vuejs 설정에서 잘 작동합니다.에서 맵 오브젝트를 초기화하는 래퍼 컴포넌트를 작성했습니다.mounted()속성으로 저장합니다.

OL은 컴포넌트의 속성에서 전파된 변경 사항을 인식하지 않으므로 변경 사항이 있을 때마다 속성(또는 이벤트 핸들러)에 대한 감시자를 사용하여 OL 함수를 호출해야 할 수 있습니다.

사이드 패널이 열리거나 닫혔을 때 맵의 뷰포트가 변경되었을 때 맵이 뒤틀리는 문제가 있었습니다.이벤트 듣기 및 호출map.updateSize()해결했습니다.

vuejs, vuejs-openlayer용 OL 플러그인도 있습니다.OL을 통합하는 것은 매우 쉬웠기 때문에 테스트하지 않았습니다.

를 사용하여 OpenLayer와 Vue.js를 통합할 수 있습니다.VueLayers는 VueLayer라고 불립니다.

인스톨

npm install vuelayers

사용.

import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(VueLayers)

// or individual components

import Vue from 'vue'
import { Map, TileLayer, OsmSource, Geoloc } from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(Map)
Vue.use(TileLayer)
Vue.use(OsmSource)
Vue.use(Geoloc)

Vue 컴포넌트 내의 OL 맵의 간단한 예를 다음에 나타냅니다.

<template>
  <div id="mapOL">
    Hi, i'm a map!
  </div>
</template>

<script>
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import TileLayer from 'ol/layer/Tile.js'  
  import OSM from "ol/source/OSM"

  export default {
    name: "map-openlayers",
    mounted() {
      let map = new Map({
        target: 'mapOL',
        layers: [
          new TileLayer({source: new OSM()})
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    }
  }
</script>

<style scoped lang="stylus">
  @import "~ol/ol.css"
  #mapOL
    height 300px
</style> 

언급URL : https://stackoverflow.com/questions/47479583/integrate-openlayers-in-vuejs-application