vue3+Turf.js的使用示例

展示：

代码：

<template>
  <div>
    <h1>沿着线段 200 英里处的点</h1>
    <div>{{ alongPoint }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as turf from '@turf/turf';

// 创建一个 ref 存储结果
const alongPoint = ref(null);

onMounted(() => {
  // 创建一个 LineString
  const line = turf.lineString([
    [-83, 30],
    [-84, 36],
    [-78, 41],
  ]);

  // 设置单位为 miles
  const options = { units: 'miles' };

  // 获取沿着这条线 200 英里处的点
  const along = turf.along(line, 200, options);

  // 存储结果
  alongPoint.value = along;
});
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

多边形交集 示例代码:

<template>
  <div>
    <h1>多边形交集</h1>
    <div v-if="intersection">
      <h2>交集的坐标：</h2>
      <pre>{{ intersection }}</pre>
    </div>
    <div v-else>
      <p>没有交集。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as turf from '@turf/turf';

// 用于存储交集结果
const intersection = ref(null);

onMounted(() => {
  // 第一个多边形
  const poly1 = turf.polygon([
    [
      [-122.801742, 45.48565],
      [-122.801742, 45.60491],
      [-122.584762, 45.60491],
      [-122.584762, 45.48565],
      [-122.801742, 45.48565],
    ],
  ]);

  // 第二个多边形
  const poly2 = turf.polygon([
    [
      [-122.520217, 45.535693],
      [-122.64038, 45.553967],
      [-122.720031, 45.526554],
      [-122.669906, 45.507309],
      [-122.723464, 45.446643],
      [-122.532577, 45.408574],
      [-122.487258, 45.477466],
      [-122.520217, 45.535693],
    ],
  ]);

  // 计算多边形交集
var res = turf.intersect(turf.featureCollection([poly1, poly2]));

  if (res) {
    intersection.value = res.geometry.coordinates;
  }
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>