157.Vue3 + OpenLayers + Turf 实现根据多边形坐标计算面积功能

📸 效果演示图

🖼️ 点击“获取面积”按钮，即可在地图上渲染指定的多边形，并显示其面积（单位：km²）

🧠 业务背景

在 Web 地图开发中，尤其是农业、国土、智慧城市等领域，常常需要根据地图上绘制的多边形（地块）来计算其真实面积。
本篇将教你如何使用 Vue3 + OpenLayers + Turf.js，通过指定多边形坐标计算其面积，并渲染到地图上。

🧩 技术要点

• ✅ 使用 Turf.js 进行地理空间计算（面积）

• ✅ 使用 OpenLayers 渲染地图与图层

• ✅ 使用 Vue 3 Composition API 管理状态

• ✅ 支持 EPSG:4326 与 EPSG:3857 投影转换

📦 安装依赖

npm install ol @turf/turf # 或 pnpm add ol @turf/turf

💡 完整代码

<!--
 * @Author: 彭麒
 * @Date: 2025/7/17
 * @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 根据多边形坐标，获取面积值
      </div>
    </div>
    <h4>
      <el-button type="primary" size="small" @click="showArea">获取面积</el-button>
      <el-button type="danger" size="small" @click="clearSource">清除图层</el-button>
    </h4>
    <div v-if="area">{{ area }} km²</div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } 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 OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import GeoJSON from 'ol/format/GeoJSON';
import { Fill, Stroke, Style, Circle } from 'ol/style';
import * as turf from '@turf/turf';

const map = ref<Map | null>(null);
const area = ref<number>(0);

// 图层数据源
const turfSource = new VectorSource({ wrapX: false });

// 添加 GeoJSON Feature
const show = (geojsonData: turf.AllGeoJSON) => {
  const features = new GeoJSON().readFeatures(geojsonData, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  });
  turfSource.addFeatures(features);
};

// 清除图层
const clearSource = () => {
  turfSource.clear();
  area.value = 0;
};

// 显示面积
const showArea = () => {
  const polygon = turf.polygon([
    [
      [125, -15],
      [113, -22],
      [154, -26],
      [144, -14],
      [125, -15]
    ]
  ]);
  show(polygon);
  area.value = Math.round(turf.area(polygon) / 1_000_000);
};

// 初始化地图
const initMap = () => {
  const baseLayer = new TileLayer({
    source: new OSM()
  });

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

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [baseLayer, vectorLayer],
    view: new View({
      projection: 'EPSG:3857',
      center: fromLonLat([113, -22]),
      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>

📘 项目亮点

• 🎯 面积单位精准换算：默认 Turf 返回平方米，这里自动换算为 km²

• 🎯 图层风格清晰美观：红色描边 + 半透明填充，适合地块分析

• 🎯 使用 EPSG:4326 转 EPSG:3857：保证地图坐标正确显示

📌 拓展建议

📚 参考文档

• Turf.js 官网

• OpenLayers 官网

• OpenLayers + Vue3 教程合集（CSDN 专栏）

✅ 总结

本示例基于 Vue 3 + OpenLayers + Turf.js，快速实现了根据多边形坐标计算面积的功能，非常适合在地块测量、空间分析等前端场景中应用。

💬 欢迎在评论区交流更多地图可视化相关问题！
🔔 点赞 + 收藏 + 关注，持续更新更多 Vue + OpenLayers 实战内容！