帮我用vue 和openLayers 写一个自定义控件 用于实现地图的绘图功能

当然可以，以下是一个简单的自定义控件的代码，使用了Vue和OpenLayers:

<template>
  <div class="ol-control ol-custom-control">
    <select v-model="type">
      <option value="Point">Point</option>
      <option value="LineString">LineString</option>
      <option value="Polygon">Polygon</option>
      <option value="Circle">Circle</option>
      <option value="Box">Box</option>
    </select>
    <button @click="startDraw">Start Draw</button>
    <button @click="endDraw">End Draw</button>
  </div>
</template>

<script>
import ol from 'openlayers';

export default {
  name: 'DrawControl',
  props: {
    map: {
      type: ol.Map,
      required: true
    }
  },
  data() {
    return {
      draw: null,
      type: 'Point'
    };
  },
  methods: {
    startDraw() {
      if (this.draw) {
        this.map.removeInteraction(this.draw);
      }
      this.draw = new ol.interaction.Draw({
        source: new ol.source.Vector(),
        type: this.type
      });
      this.map.addInteraction(this.draw);
    },
    endDraw() {
      if (this.draw) {
        this.map.removeInteraction(this.draw);
        this.draw = null;
      }
    }
  }
};
</script>

<style scoped>
.ol-custom-control {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
}
.ol-custom-control select {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  margin-right: 10px;
  cursor: pointer;
}
.ol-custom-control button {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
</style>

这个控件会在地图右下角显示一个下拉框和两个按钮，通过选择绘制类型和点击按钮可以在地图上绘制图形。需要注意的是，绘制功能是通过创建 `Draw` 交互实现的，因此需要在 `props` 中传入地图对象。

需要注意的是，这个控件是在 `mounted` 钩子中将自己添加到地图中的，因此需要确保地图已经加载完成。