vue openlayers 自定义绘图控件

以下是一个使用Vue和OpenLayers创建自定义绘图控件的示例：

<template>
  <div class="draw-control ol-unselectable ol-control">
    <button @click="toggleDrawing">{{ drawing ? 'Stop' : 'Start' }} drawing</button>
    <button @click="clearDrawing">Clear</button>
  </div>
</template>

<script>
import ol from 'openlayers';

export default {
  name: 'DrawControl',
  props: {
    map: {
      type: ol.Map,
      required: true
    }
  },
  data() {
    return {
      drawing: false,
      source: new ol.source.Vector(),
      draw: new ol.interaction.Draw({
        source: this.source,
        type: 'LineString'
      })
    };
  },
  mounted() {
    const element = this.$el;
    ol.control.Control.call(this, {
      element: element
    });
    this.map.addControl(this);
  },
  methods: {
    toggleDrawing() {
      if (!this.drawing) {
        this.map.addInteraction(this.draw);
      } else {
        this.map.removeInteraction(this.draw);
      }
      this.drawing = !this.drawing;
    },
    clearDrawing() {
      this.source.clear();
    }
  }
};
</script>

<style scoped>
.draw-control {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>

在此示例中，我们定义了一个名为DrawControl的Vue组件。它接受一个属性map，表示使用的OpenLayers地图实例。在data中，我们定义了一个drawing状态表示当前是否正在绘制，一个source表示绘制的要素源，以及一个draw交互用于绘制线。在mounted钩子中，我们将创建一个包含开始和清除按钮的控件元素，并将其添加到地图控件中。toggleDrawing方法将在开始和停止绘制之间切换，而clearDrawing方法将清除绘制的要素。最后，我们将组件的样式应用于控件元素。