VueLayers - Custom Modify Interaction Style

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="toggleMap">
      Toggle map
    </button>
  </header>

  <vl-map v-if="showMap"
          ref="map">
    <vl-view :zoom.sync="zoom" 
             :center.sync="center" />
    <vl-layer-tile>
      <vl-source-osm />
    </vl-layer-tile>
    
    <vl-layer-vector>
      <vl-source-vector ident="EditorSource"
                        :features.sync="features" />
    </vl-layer-vector>
    
    <vl-interaction-draw type="Polygon"
                         source="EditorSource" />
  </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;
}

JavaScript

// https://unpkg.com/[email protected]/lib/index.umd.js
// https://unpkg.com/[email protected]/lib/index.umd.js
const features = [{
  'id': 1,
  'type': 'Feature',
  'geometry': {
    'type': 'Polygon',
    'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
                     [0, 6e6], [-2e6, 6e6]]]
  }
}]

new Vue({
	el: '#app',
  
  data () {
  	return {
      showMap: true,
    	zoom: 2,
      center: [0, 0],
      features: []
    }
  },
  
  methods: {
  	toggleMap () {
    	this.features = []
      this.showMap = !this.showMap
      console.log(this.features)
    }
  }
})