vue openlayers 实现自定义绘图控件实现类似ArcGIS绘图工具条

要实现类似ArcGIS绘图工具条，可以考虑使用`ol.control.Control`和`ol.interaction.Interaction`来自定义绘图控件。

首先，需要在Vue项目中引入OpenLayers库。可以通过npm安装ol和@types/ol，然后在Vue组件中引入：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {Draw, Modify, Snap} from 'ol/interaction';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Vector as VectorLayer} from 'ol/layer';
import {Vector as VectorSource} from 'ol/source';
import {LineString, Polygon, Circle} from 'ol/geom';
import Control from 'ol/control/Control';

然后，在Vue组件中添加一个`div`作为地图容器，并在`mounted`生命周期中初始化地图：

<template>
  <div class="map-container" ref="map"></div>
</template>

<script>
export default {
  mounted() {
    const map = new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
    // 在这里添加绘图控件和交互
  }
}
</script>

<style>
.map-container {
  height: 500px;
}
</style>

接下来，可以定义一个继承自`ol.control.Control`的自定义控件类，用于显示绘图工具条：

class DrawControl extends Control {
  constructor(options) {
    const element = document.createElement('div');
    element.className = 'draw-control ol-unselectable ol-control';
    element.innerHTML = `
      <button class="draw-button" data-type="Point">绘制点</button>
      <button class="draw-button" data-type="LineString">绘制线</button>
      <button class="draw-button" data-type="Polygon">绘制多边形</button>
      <button class="draw-button" data-type="Circle">绘制圆</button>
      <button class="draw-button" data-type="Clear">清除</button>
    `;
    super({
      element,
      target: options.target
    });
    // 添加事件监听
    element.addEventListener('click', this.handleButtonClick.bind(this));
  }

  handleButtonClick(event) {
    const type = event.target.getAttribute('data-type');
    const map = this.getMap();
    const source = new VectorSource();
    const layer = new VectorLayer({
      source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33'
          })
        })
      })
    });
    switch (type) {
      case 'Point':
        map.addInteraction(new Draw({
          source,
          type: 'Point'
        }));
        break;
      case 'LineString':
        map.addInteraction(new Draw({
          source,
          type: 'LineString'
        }));
        break;
      case 'Polygon':
        map.addInteraction(new Draw({
          source,
          type: 'Polygon'
        }));
        break;
      case 'Circle':
        map.addInteraction(new Draw({
          source,
          type: 'Circle'
        }));
        break;
      case 'Clear':
        map.getInteractions().forEach(interaction => {
          if (interaction instanceof Draw) {
            map.removeInteraction(interaction);
          }
        });
        source.clear();
        break;
    }
    if (type !== 'Clear') {
      map.addLayer(layer);
      map.addInteraction(new Modify({
        source
      }));
      map.addInteraction(new Snap({
        source
      }));
    }
  }
}

这个自定义控件类继承自`ol.control.Control`，在构造函数中创建一个包含绘图按钮的`div`元素，并添加点击事件监听。在点击事件处理函数中，根据按钮的`data-type`属性选择对应的交互类型，如`Point`、`LineString`、`Polygon`和`Circle`，然后添加到地图中，并创建一个`VectorLayer`用于显示绘制的要素。同时，添加`Modify`和`Snap`交互用于编辑和捕捉要素。

最后，在Vue组件的`mounted`生命周期中添加绘图控件：

mounted() {
  const map = new Map({
    target: this.$refs.map,
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    view: new View({
      center: [0, 0],
      zoom: 2
    })
  });
  const drawControl = new DrawControl({
    target: document.querySelector('.ol-overlaycontainer')
  });
  map.addControl(drawControl);
}

这里创建一个`DrawControl`实例，并将其添加到地图中。注意，`DrawControl`的`target`属性需要设置为`.ol-overlaycontainer`，这样才能将工具条添加到地图上方，避免被覆盖。

现在，就可以在Vue项目中使用自定义绘图控件，实现类似ArcGIS绘图工具条的功能了。