VueLayers

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<div id="app">
  <vl-map v-if="showMap"
          ref="map"
          @mounted="getExtent('map')">
    <vl-view ref="view"
             :zoom.sync="zoom" 
             :center.sync="center"
             @mounted="getExtent('view')"></vl-view>
    <vl-layer-tile>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
  </vl-map>  
</div>

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  flex-direction: column;
}

.vl-map {
  overflow: hidden;
}

JavaScript

new Vue({
	el: '#app',
  
  data () {
  	return {
      showMap: true,
    	zoom: 2,
      center: [0, 0]
    }
  },
  
  methods: {
  	async getExtent (cmp) {
      let extent
      
    	try {
      	const olMap = this.$refs.map.$map
        const mapSize = olMap.getSize()
        // getting the view before awaitubg for vl-view mountPromise
        // returns map default view
        /* const olView = olMap.getView() */
        // wait for vl-view component mountPromise before extracting view from olMap
        await this.$refs.view.$mountPromise
        const olView = olMap.getView()
        console.log(olView.getCenter(), olView.getZoom())
        extent = olView.calculateExtent()
      } catch (err) {
      	console.error(cmp, err)
      } finally {
        console.log(cmp, extent)
      }
    }
  }
})