vue3 openlayer测距

Vue.js是一种流行的JavaScript框架，用于构建界面。它具有响应式数据绑定和组件化的特性，使得开发者可以更轻松地构建交互性强的Web应用程序。

OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图。它提供了丰富的地图功能，包括地图显示、地图控制、地图标注、地图查询等。

在Vue.js中使用OpenLayers可以通过安装OpenLayers的npm包，并在Vue组件中引入和使用OpenLayers的相关功能。下面是一个简单的示例代码，展示如何在Vue.js中使用OpenLayers进行测距功能：

1. 首先，安装OpenLayers的npm包：

npm install ol

2. 在Vue组件中引入OpenLayers的相关模块：

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, Snap } from 'ol/interaction';
import { createBox } from 'ol/interaction/Draw';

import 'ol/ol.css';

3. 在Vue组件的模板中添加一个地图容器：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>

4. 在Vue组件的脚本中初始化地图和测距功能：

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

    const source = new VectorSource();
    const vector = new VectorLayer({
      source: source,
    });
    map.addLayer(vector);

    const draw = new Draw({
      source: source,
      type: 'LineString',
    });
    map.addInteraction(draw);

    const snap = new Snap({ source: source });
    map.addInteraction(snap);

    draw.on('drawend', (event) => {
      const geometry = event.feature.getGeometry();
      const coordinates = geometry.getCoordinates();
      const length = geometry.getLength();
      console.log('Coordinates:', coordinates);
      console.log('Length:', length);
    });
  },
};

以上代码中，我们创建了一个地图容器，并在地图上添加了一个OSM图层。然后，我们创建了一个矢量图层和一个绘制交互（Draw），用于绘制线段。当绘制结束时，我们可以通过监听`drawend`事件获取绘制的线段的坐标和长度。

这样，我们就可以在Vue.js中使用OpenLayers实现测距功能了。