155.Vue3中使用OpenLayers+Turf获取两点之间的距离

最新推荐文章于 2025-07-17 10:43:29 发布

吉檀迦俐

最新推荐文章于 2025-07-17 10:43:29 发布

阅读量166

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue3+OpenLayers 文章标签： echarts vue.js 前端 ecmascript javascript

本文链接：https://blog.csdn.net/Miller777_/article/details/149390960

Vue3+OpenLayers 专栏收录该内容

162 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

✨ 效果图

✨ 写在前面

在地图开发中，我们经常会用到“两点之间的距离计算”功能。虽然 OpenLayers 本身也提供了一些距离量测的方法，但借助 Turf.js 可以更加灵活且兼容 GeoJSON 结构。

本篇文章介绍如何在 Vue3 项目中使用 OpenLayers 和 Turf 完成以下功能：

绘制两个固定点及连线；
计算两点之间的距离（单位：公里）；
清除图层重置内容。

🔧 技术栈

Vue 3（Composition API）
OpenLayers 10+
Turf.js
Element Plus（按钮展示）

📦 安装依赖

npm install ol @turf/turf
# 若未安装 Element Plus：
npm install element-plus

📄 完整源码

🧩 `地图组件.vue`

<!--
 * @Author: 彭麒
 * @Date: 2025/7/16
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">
        Vue3中使用OpenLayers+Turf 获取两点之间的距离
      </div>
    </div>
    <h4>
      <el-button type="primary" size="small" @click="showTwo">
        绘制两点并获取距离
        <span v-if="juli" class="text-green-400">{{ juli.toFixed(3) }} km</span>
      </el-button>
      <el-button type="danger" size="small" @click="clearSource">清除图层</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import XYZ from 'ol/source/XYZ'
import { fromLonLat } from 'ol/proj'
import * as turf from '@turf/turf'
import GeoJSON from 'ol/format/GeoJSON'
import { Fill, Stroke, Style, Circle } from 'ol/style'

// 状态定义
const map = ref(null)
const turfSource = new VectorSource({ wrapX: false })
const juli = ref(0)

// 显示 GeoJSON 数据（可以是 Point、LineString）
function show(geojsonData) {
  const features = new GeoJSON().readFeatures(geojsonData, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  })
  turfSource.addFeatures(features)
}

// 清除矢量图层数据和距离
function clearSource() {
  turfSource.clear()
  juli.value = 0
}

// 绘制两点及连线，计算距离
function showTwo() {
  const from = turf.point([-75.343, 39.984])
  const to = turf.point([-75.534, 39.123])
  const options = { units: 'kilometers' }

  clearSource()
  show(from)
  show(to)
  juli.value = turf.distance(from, to, options)

  const linestring1 = turf.lineString([[-75.343, 39.984], [-75.534, 39.123]], { name: 'line 1' })
  show(linestring1)
}

// 初始化地图
function initMap() {
  const gaode_Layer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=en&size=1&scl=1&style=7'
    })
  })

  const turfLayer = new VectorLayer({
    source: turfSource,
    style: new Style({
      fill: new Fill({
        color: 'rgba(255,0,0,0.2)'
      }),
      stroke: new Stroke({
        width: 2,
        color: 'blue'
      }),
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: '#ff0000'
        })
      })
    })
  })

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [gaode_Layer, turfLayer],
    view: new View({
      projection: 'EPSG:3857',
      center: fromLonLat([-75.343, 39.984]),
      zoom: 8
    })
  })
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42b983;
}

#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
</style>