帮我用vue 和openLayers 写一段自定义控件 的代码

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

<template>
  <div class="ol-control ol-custom-control">
    <button @click="toggleVisibility">{{ visible ? 'Hide' : 'Show' }} Control</button>
    <div v-if="visible" class="ol-custom-control-content">
      <p>Custom Control Content</p>
    </div>
  </div>
</template>

<script>
import ol from 'openlayers';

export default {
  name: 'CustomControl',
  props: {
    map: {
      type: ol.Map,
      required: true
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    const control = new ol.control.Control({ element: this.$el });
    this.map.addControl(control);
  },
  methods: {
    toggleVisibility() {
      this.visible = !this.visible;
    }
  }
};
</script>

<style scoped>
.ol-custom-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
.ol-custom-control button {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
}
.ol-custom-control-content {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

这个控件会在地图右上角显示一个按钮，点击按钮可以切换控件的可见性。控件的内容可以在 `ol-custom-control-content` 元素中自定义。

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