vue+openlayers5学习总结（五）改装成vue的一些功能

1.画点线面

• div中代码

 <form class="form-inline">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </form>

• script中代码

data() {
   return {
     view: null,
     map: null,
     draw: null,
     mysource: null,
     selected: "请选择",
     options: [
       { text: "Point", value: "Point" },
       { text: "LineString", value: "LineString" },
       { text: "Polygon", value: "Polygon" },
        { text: "None", value: "None" }
     ]
   };


self.mysource = new VectorSource({ wrapX: false });
var vector = new VectorLayer({
     source: self.mysource
   });
this.map = new Map({
      target: mapcontainer,
     //地图图层
     layers: [
       new TileLayer({
         source: new OSM(),
         minResolution: 1,
         maxResolution: 500
       }),
       vector
     ],

     loadTilesWhileAnimating: true,
     //地图视图
     view: myview
   });


watch: {
   selected: function() {
     this.map.removeInteraction(this.draw);
     console.log(this.selected);
    if (this.selected != "None") {
       this.addInteraction(this.selected);
     }
   }
 },
 methods: {
   addInteraction(typevalue) {
     let self=this;
     if (typevalue !== "None") {
       self.draw = new Draw({
         source: self.mysource,
         type: typevalue
       });
       self.map.addInteraction(self.draw);
     }
   }
 }