帮我用vue 和openLayers 写一个自定义控件 用于地图的缩放

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

<template>
  <div class="ol-control ol-custom-control">
    <button @click="zoomIn">+</button>
    <button @click="zoomOut">-</button>
  </div>
</template>

<script>
import ol from 'openlayers';

export default {
  name: 'ZoomControl',
  props: {
    map: {
      type: ol.Map,
      required: true
    }
  },
  methods: {
    zoomIn() {
      const view = this.map.getView();
      const zoom = view.getZoom() + 1;
      view.animate({ zoom: zoom });
    },
    zoomOut() {
      const view = this.map.getView();
      const zoom = view.getZoom() - 1;
      view.animate({ zoom: zoom });
    }
  }
};
</script>

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

这个控件会在地图右下角显示两个按钮，点击按钮可以实现地图的缩放。需要注意的是，缩放是通过修改地图的 `view` 对象实现的，因此需要在 `props` 中传入地图对象。

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