vue-openlayer实现绘制折线并计算折线距离

你可以使用Vue.js和OpenLayers库来实现绘制折线并计算折线距离。下面是一个基本的实现示例：

首先，确保你已经安装了Vue.js和OpenLayers依赖：

npm install vue openlayers

然后，在你的Vue组件中，引入OpenLayers和样式表：

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

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 modify = new Modify({
      source: source
    });
    map.addInteraction(modify);

    // 计算折线距离
    draw.on('drawend', (event) => {
      const feature = event.feature;
      const geometry = feature.getGeometry();
      const coordinates = geometry.getCoordinates();
      
      let distance = 0;
      for (let i = 1; i < coordinates.length; i++) {
        const coord1 = coordinates[i];
        const coord2 = coordinates[i - 1];
        distance += getDistance(coord1, coord2);
      }
      
      console.log('折线距离：', distance);
    });

    // 计算两点之间的距离
    function getDistance(coord1, coord2) {
      const dx = coord2[0] - coord1[0];
      const dy = coord2[1] - coord1[1];
      return Math.sqrt(dx * dx + dy * dy);
    }
  }
}

在上面的代码中，我们创建了一个地图实例，并添加了一个基本的OSM图层。然后，我们创建了一个矢量图层和一个绘制交互，允许用户绘制线段。在绘制结束时，我们计算折线的距离，并输出到控制台。

注意，我们使用了`ol/ol.css`样式表来确保地图正确显示。你可以根据自己的需求进行样式调整。

最后，在你的Vue模板中，添加一个具有指定ID的容器元素：

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

这样，当你在浏览器中运行该Vue组件时，你将能够在地图上绘制折线，并计算折线的距离。

希望对你有所帮助！