vue openlayers 启动测距工具

要在Vue中使用OpenLayers测距工具，您需要执行以下步骤：

1. 首先，您需要在Vue项目中安装OpenLayers。您可以使用npm来安装它：`npm install ol`

2. 在Vue组件中，您需要导入OpenLayers中的一些类，例如Map、View和Draw。您可以使用以下代码导入：

import { Map, View } from 'ol';
import Draw from 'ol/interaction/Draw';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { getLength } from 'ol/sphere';

3. 在Vue组件中，您需要创建一个地图实例，并设置地图的视图。以下是一个示例代码：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: 'MapComponent',
  mounted() {
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }
}
</script>

4. 接下来，您需要添加一个绘图交互操作，以便用户可以在地图上绘制距离。以下是一个示例代码：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: 'MapComponent',
  mounted() {
    const source = new VectorSource();
    const vector = new VectorLayer({
      source: source
    });

    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        vector
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    const draw = new Draw({
      source: source,
      type: 'LineString',
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          width: 2
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: 'rgba(0, 0, 0, 0.5)'
          }),
          stroke: new Stroke({
            color: 'rgba(255, 255, 255, 0.7)',
            width: 2
          })
        })
      })
    });

    map.addInteraction(draw);

    draw.on('drawend', function(event) {
      const geom = event.feature.getGeometry();
      const length = getLength(geom);
      console.log(length);
    });
  }
}
</script>

在上面的代码中，我们首先创建了一个`VectorSource`和一个`VectorLayer`，并将它们添加到地图中。然后，我们创建了一个`Draw`交互操作，并将它添加到地图中。当用户在地图上绘制一条线时，它将触发`drawend`事件，并计算该线的长度。最后，将长度值记录在控制台中。

请注意，上面的代码仅提供了一个简单的示例。您可以根据您的需求自定义样式和交互操作。