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">
  <header>
    <button @click="resetFeatures">
      Reset features
    </button>
  </header>

  <vl-map v-if="showMap"
          ref="map">
    <vl-view :zoom.sync="zoom" 
             :center.sync="center"></vl-view>
    <vl-layer-tile>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
    
    <vl-layer-vector>
      <vl-source-vector ident="EditorSource"
                        :features.sync="features"></vl-source-vector>
    </vl-layer-vector>
    
    <vl-interaction-draw v-if="isDrawingEnabled"
                         type="Polygon"
                         source="EditorSource"></vl-interaction-draw>
                         <vl-interaction-modify source="EditorSource"></vl-interaction-modify>
  </vl-map>  
</div>

CSS

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

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

header {
  margin-bottom: 0.25rem;
}

.vl-map {
  overflow: hidden;
}

JavaScript

const feature = {
  'id': 1,
  'type': 'Feature',
  'geometry': {
    'type': 'Polygon',
    'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6], [-2e6, 6e6]]]
  }
}

function clone (value) {
	return JSON.parse(JSON.stringify(value))
}

new Vue({
	el: '#app',
  
  data () {
  	return {
      showMap: true,
    	zoom: 2,
      center: [0, 0],
      features: [clone(feature)]
    }
  },
  
  computed: {
  	isDrawingEnabled () {
    	return !this.features.length
    }
  },
  
  methods: {
  	async resetFeatures () {
      this.features = []
      await this.$nextTick()
      this.features = [clone(feature)]
      
      console.log('Should draw interaction be enabled:', this.isDrawingEnabled)
    }
  }
})