web-dev-qa-db-ja.com

vuejsアプリケーションにopenlayersを統合する

やあみんな、

OpenlayersをVuejsアプリケーションに統合した経験のある人はいますか？

Vuejsアプリにいくつかのレイヤーを表示する必要があります。

乾杯、

vue.jsopenlayersopenlayers-3
6
Wesley

はい、現在、VuejsとOpenLayers 4を使用して既存のアプリケーションを書き直しています。アプリにはフォームとほぼフルスクリーンのマップがあります（Googleマップのルーティング機能と同様）。

OL npm lib はOpenLayersをES2015ファイルとして公開します。これは一般的なvuejsセットアップでうまく機能します。マップオブジェクトをmounted()で初期化し、プロパティとして保存するラッパーコンポーネントを作成しました。

OLはコンポーネントのプロパティで伝播された変更を取得しないため、プロパティ（またはイベントハンドラー）で watchers を使用して、何かが発生するたびにOL関数を呼び出す必要がある場合があります）変化します。

私が抱えていた問題の1つは、サイドパネルが開閉したときにマップが乱れ、マップのビューポートが変更されたことです。イベントを聞いてmap.updateSize()を呼び出すと、それが解決しました。

OL vuejs用のプラグイン、 vuejs-openlayers もあります。統合OLだったので、テストしませんでした。とにかくとても簡単です。

5
dube

OL a Vueコンポーネント内のマップの簡単な例：

<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>
1
Pablo

this Vue.js UI library OpenlayersをVueLayersと呼ばれるVue.jsと統合します：

インストール

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)
1
Boussadjra Brahim