在 vuejs 應用程序中集成 openlayers

Question

有沒有人有在 Vuejs 應用程序中集成 Openlayers 的經驗？

我需要在 Vuejs 應用程序上顯示一些圖層。

干杯，

Answer 1

是的，我目前正在使用 Vuejs 和 OpenLayers 4 重寫現有應用程序。該應用程序具有表單和幾乎全屏的地圖（類似於谷歌地圖的路由功能）。

OL npm 庫將 OpenLayers 公開為 ES2015 文件，與常見的 vuejs 設置很好地配合使用。 我創建了一個包裝器組件，它在mounted()中初始化地圖對象並將其存儲為屬性。

OL 不會獲取組件屬性上的傳播更改，因此您可能需要在屬性（或事件處理程序）上使用觀察程序，以便在發生更改時調用 OL 函數。

我遇到的一個問題是當側面板打開/關閉時地圖失真，因此改變了地圖的視口。 監聽事件並調用map.updateSize()解決了這個問題。

甚至還有一個用於 vuejs 的 OL 插件vuejs-openlayers 。 不過我沒有測試它，因為無論如何集成 OL 都很容易。

Answer 2

您可以使用this Vue.js UI library ，它將 Openlayers 與 Vue.js 集成在一起，稱為VueLayers ：

安裝

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)

Answer 3

這是 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>