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

要实现类似ArcGIS绘图工具条的自定义绘图控件，可以借助Vue.js和OpenLayers库来完成。

首先，在Vue.js中创建一个组件，用于包含OpenLayers地图。然后，使用OpenLayers的绘图工具来实现绘图功能。可以创建一个工具条组件，在该组件中包含各种绘图工具，比如点、线、面等。

下面是一个简单的实现示例：

<template>
  <div class="map">
    <div id="map" class="map-container"></div>
    <div class="toolbar">
      <button @click="activateDraw('Point')">绘制点</button>
      <button @click="activateDraw('LineString')">绘制线</button>
      <button @click="activateDraw('Polygon')">绘制多边形</button>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { OSM, Vector as VectorSource } from 'ol/source'
import { Draw, Modify, Snap } from 'ol/interaction'

export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
      draw: null,
      modify: null,
      snap: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM()
          }),
          new VectorLayer({
            source: new VectorSource()
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })

      this.initDraw()
    },
    initDraw() {
      const source = this.map.getLayers().item(1).getSource()

      this.draw = new Draw({
        source: source,
        type: 'Point'
      })

      this.modify = new Modify({
        source: source
      })

      this.snap = new Snap({
        source: source
      })

      this.map.addInteraction(this.draw)
      this.map.addInteraction(this.modify)
      this.map.addInteraction(this.snap)

      this.draw.on('drawend', (event) => {
        const feature = event.feature
        feature.setId(new Date().getTime())
      })
    },
    activateDraw(type) {
      this.draw.setActive(true)
      this.draw.setType(type)
      this.modify.setActive(true)
      this.snap.setActive(true)
    }
  }
}
</script>

<style scoped>
.map {
  position: relative;
  height: 400px;
}

.map-container {
  height: 100%;
  width: 100%;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
</style>

上面的代码中，首先初始化了一个OpenLayers地图，在地图上添加了OSM图层和一个空白的矢量图层，用于存储绘制的要素。然后，使用Draw、Modify和Snap三个交互对象来实现绘图功能。在initDraw方法中初始化这些交互对象，并在activateDraw方法中根据用户选择的绘图类型来设置Draw交互对象的type属性。

在模板中，使用三个按钮来触发activateDraw方法，分别对应绘制点、线和多边形。同时，使用CSS样式将绘图工具条定位到地图左上角。

这样就完成了一个简单的自定义绘图控件，类似于ArcGIS的绘图工具条。可以根据自己的需要进行二次开发，添加更多的绘图工具和样式。