Cesium多边形面积怎么算，Turf.js计算方法详解（附：核心代码示例）

wowwwai GIS研习社 · 工具流程与项目排障

如果你正在做“Cesium多边形面积怎么算，Turf.js计算方法详解（附：核心代码示例）”这个功能，核心问题通常不是画出多边形，而是把用户在 Cesium 场景中点击得到的经纬度坐标，转换成 Turf.js 能正确识别的 GeoJSON Polygon，并得到可信的面积结果。

本文以 Cesium 绘制面并使用 Turf.js 计算面积为主线，讲清楚 Cesium多边形面积怎么算、Turf.js计算面积的核心代码、坐标顺序、闭合环、单位换算和常见误差来源。适合 WebGIS 开发者、GIS 初学者和正在做三维量测工具的工程人员参考。

引言：Cesium多边形面积怎么算才可靠

在 Cesium 中，用户通常通过鼠标点击地球表面获取多个点，然后用这些点构建一个多边形。看起来只要把点连起来，再套一个面积公式就可以了，但实际开发中经常会遇到这些问题：

• Cesium 拿到的是 Cartesian3 三维坐标，不是 Turf.js 需要的经纬度坐标。
• Turf.js 的 Polygon 坐标顺序是 [经度, 纬度]，不是 [纬度, 经度]。
• GeoJSON Polygon 的首尾点必须闭合，否则 Turf.js 可能计算失败或结果异常。
• 面积单位通常是平方米，需要根据业务转换为平方公里、公顷或亩。
• 如果多边形跨越 180° 经线、覆盖范围很大，计算结果需要额外检查。

所以，Cesium多边形面积怎么算的实用答案是：用 Cesium 负责交互取点和显示，用 Turf.js 负责基于 GeoJSON 的球面面积计算。这也是 WebGIS 项目里比较常见、易维护的一种实现方式。

背景：为什么 Cesium 不能直接把多边形面积算完

Cesium 是一个三维地理可视化引擎，擅长做地球渲染、三维瓦片、影像地形、实体绘制和交互。用户点击场景时，Cesium 通常返回的是三维笛卡尔坐标 Cartesian3，这个坐标是在地心坐标系下表达的位置。

而 Turf.js 是一个 JavaScript GIS 空间分析库，擅长处理 GeoJSON，包括点、线、面、缓冲区、叠加分析和面积长度计算。Turf.js 的 area 方法要求输入标准 GeoJSON 对象，例如 Polygon 或 Feature<Polygon>。

因此，Cesium多边形面积怎么算的关键转换链路是：

1. Cesium 鼠标点击获取地球表面点。
2. 将 Cartesian3 转为经纬度。
3. 按 GeoJSON 要求组织为 [[lon, lat], [lon, lat], ...]。
4. 补上闭合点，形成 Polygon 外环。
5. 调用 turf.area() 得到平方米面积。
6. 按业务需要格式化为平方米、平方公里、公顷或亩。

注意：Cesium 的坐标对象和 Turf.js 的 GeoJSON 坐标不是同一种数据结构。不要把 Cesium 的 Cartesian3 数组直接传给 Turf.js。

原理：Turf.js计算面积到底算的是什么

Turf.js计算面积使用的是 GeoJSON 面要素。最常见写法如下：

const polygon = turf.polygon([[
  [116.391, 39.907],
  [116.401, 39.907],
  [116.401, 39.917],
  [116.391, 39.917],
  [116.391, 39.907]
]]);

const area = turf.area(polygon);
console.log(area); // 单位：平方米

这里有三个重要点：

• 坐标顺序：GeoJSON 使用 [longitude, latitude]，也就是 [经度, 纬度]。
• 外环闭合：Polygon 的第一个点和最后一个点应完全相同。
• 返回单位：turf.area() 返回平方米。

Turf.js 并不是简单使用屏幕上的像素面积，也不是用 Cesium 视角下的投影平面面积，而是基于地理坐标计算面状要素的面积。因此，对于常规行政区、地块、项目红线、巡检范围等中小尺度面要素，使用 Turf.js计算面积通常足够实用。

但如果你的多边形覆盖范围特别大，例如跨越多个国家、跨越极区，或者跨越国际日期变更线，那么需要进一步验证结果，必要时使用更严格的测地线或投影面积计算方案。

步骤：Cesium多边形面积计算核心代码

步骤一：安装或引入 Turf.js

如果你的项目使用 npm，可以安装 Turf.js：

npm install @turf/turf

在模块化项目中引入：

import * as turf from '@turf/turf';

如果是传统页面，也可以通过脚本方式引入 Turf.js。实际生产项目建议使用打包工具统一管理依赖，避免版本混乱。

步骤二：Cesium 点击获取地表坐标

下面示例演示如何在 Cesium 中点击地球表面获取点，并转换为经纬度数组。这里假设你已经创建好了 viewer。

const positions = [];

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function (movement) {
  const cartesian = viewer.scene.pickPosition(movement.position);

  if (!Cesium.defined(cartesian)) {
    return;
  }

  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  const lon = Cesium.Math.toDegrees(cartographic.longitude);
  const lat = Cesium.Math.toDegrees(cartographic.latitude);

  positions.push([lon, lat]);

  console.log('当前点：', lon, lat);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

如果你的场景没有开启深度检测，或者点击位置没有三维对象，pickPosition 可能返回无效值。对于贴地量测，也可以根据项目情况使用 viewer.camera.pickEllipsoid 或结合地形采样方法处理。

步骤三：组装 GeoJSON Polygon

当用户至少点击 3 个点后，就可以把坐标数组转成 Polygon。注意必须闭合首尾点。

function closeRing(coords) {
  if (coords.length < 3) {
    throw new Error('多边形至少需要 3 个点');
  }

  const first = coords[0];
  const last = coords[coords.length - 1];

  if (first[0] !== last[0] || first[1] !== last[1]) {
    return [...coords, first];
  }

  return coords;
}

然后创建 Turf.js Polygon：

function createTurfPolygon(coords) {
  const ring = closeRing(coords);
  return turf.polygon([ring]);
}

步骤四：调用 Turf.js 计算面积

面积计算代码很短，但前提是前面的坐标顺序和闭合环都正确。

function calculateAreaByTurf(coords) {
  const polygon = createTurfPolygon(coords);
  const areaSquareMeters = turf.area(polygon);
  return areaSquareMeters;
}

const area = calculateAreaByTurf(positions);
console.log('面积平方米：', area);

到这里，Cesium多边形面积怎么算的核心流程已经完成：Cesium 负责采点，Turf.js 负责基于 GeoJSON Polygon 计算面积。

步骤五：格式化面积单位

实际项目中，直接显示一长串平方米数字并不友好。可以根据面积大小自动转换单位。

function formatArea(areaSquareMeters) {
  if (areaSquareMeters >= 1000000) {
    return (areaSquareMeters / 1000000).toFixed(4) + ' 平方公里';
  }

  if (areaSquareMeters >= 10000) {
    return (areaSquareMeters / 10000).toFixed(4) + ' 公顷';
  }

  return areaSquareMeters.toFixed(2) + ' 平方米';
}

如果业务场景需要显示“亩”，可以按常用换算关系处理：

function squareMetersToMu(areaSquareMeters) {
  return areaSquareMeters / 666.6666667;
}

console.log(squareMetersToMu(area).toFixed(2) + ' 亩');

步骤六：完整核心代码示例

下面给出一个简化版核心代码，适合放入已有 Cesium 项目的测面积工具中。实际项目中你还需要补充绘制点、绘制线、绘制面、右键结束、清除结果等交互逻辑。

import * as turf from '@turf/turf';

const measurePoints = [];
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

function closeRing(coords) {
  if (coords.length < 3) {
    throw new Error('多边形至少需要 3 个点');
  }

  const first = coords[0];
  const last = coords[coords.length - 1];

  if (first[0] !== last[0] || first[1] !== last[1]) {
    return [...coords, first];
  }

  return coords;
}

function calculatePolygonArea(coords) {
  const ring = closeRing(coords);
  const polygon = turf.polygon([ring]);
  return turf.area(polygon);
}

function formatArea(areaSquareMeters) {
  if (areaSquareMeters >= 1000000) {
    return (areaSquareMeters / 1000000).toFixed(4) + ' 平方公里';
  }

  if (areaSquareMeters >= 10000) {
    return (areaSquareMeters / 10000).toFixed(4) + ' 公顷';
  }

  return areaSquareMeters.toFixed(2) + ' 平方米';
}

handler.setInputAction(function (movement) {
  const cartesian = viewer.scene.pickPosition(movement.position);

  if (!Cesium.defined(cartesian)) {
    return;
  }

  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  const lon = Cesium.Math.toDegrees(cartographic.longitude);
  const lat = Cesium.Math.toDegrees(cartographic.latitude);

  measurePoints.push([lon, lat]);

  if (measurePoints.length >= 3) {
    const area = calculatePolygonArea(measurePoints);
    console.log('多边形面积：', formatArea(area));
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

常见坑：Turf.js计算面积结果不对的排查点

坑一：经纬度顺序写反

这是最常见的问题。Cesium 转出来时你可能习惯写成 [lat, lon]，但 Turf.js 和 GeoJSON 要求是 [lon, lat]。

// 错误
[39.907, 116.391]

// 正确
[116.391, 39.907]

如果坐标顺序写反，轻则面积离谱，重则图形跑到地球另一侧。

坑二：Polygon 没有闭合

GeoJSON Polygon 的外环建议首尾闭合。也就是最后一个点与第一个点相同。

// 正确的 Polygon 外环
[
  [116.391, 39.907],
  [116.401, 39.907],
  [116.401, 39.917],
  [116.391, 39.917],
  [116.391, 39.907]
]

不要把屏幕上“看起来闭合”当作数据上已经闭合。显示闭合和坐标数组闭合是两回事。

坑三：点数不足 3 个

多边形至少需要 3 个不同点。只有 1 个点或 2 个点时，只能形成点或线，不能形成面。此时应该在代码里直接阻止计算。

坑四：点击到了模型或天空，坐标无效

在 Cesium 中，pickPosition 的可用性与场景深度、三维对象、地形和浏览器环境有关。建议在获取坐标后做有效性判断，不要默认每一次点击都能得到地表点。

if (!Cesium.defined(cartesian)) {
  console.warn('未获取到有效坐标');
  return;
}

坑五：面积单位误解

turf.area() 返回的是平方米，不是平方公里，也不是亩。如果前端页面直接标成“平方公里”，结果会相差 100 万倍。

坑六：大范围区域误差和跨日期变更线问题

对于城市地块、园区范围、巡检区域、项目红线，Turf.js计算面积通常很方便。但如果你的多边形跨越 180° 经线、接近极区，或者范围大到覆盖洲际区域，就需要谨慎检查。此时可以考虑后端 GIS 服务、专业投影面积计算或测地线库进行复核。

方法比较：Cesium、Turf.js、后端 GIS 面积计算怎么选

方法	适合场景	优点	注意事项
Cesium 前端自写公式	简单演示、小范围测试	依赖少，代码可控	容易忽略球面、投影和坐标转换问题
Turf.js计算面积	WebGIS 前端量测、地块面积、范围统计	接入简单，GeoJSON 生态友好，返回平方米	要保证坐标顺序、闭合环和数据合法
PostGIS 后端计算	正式业务入库、批量计算、权限管控	适合大数据量和数据库工作流	需要明确 geometry/geography 类型和坐标系
ArcGIS 或 QGIS 计算	桌面核验、制图出图、专业质检	参数可视化，便于人工复核	不适合作为前端实时交互的唯一方案

如果你的需求是 Cesium 页面中用户画一个面，立即显示面积，优先选择 Turf.js。若面积结果要进入正式审批、确权、统计报表，建议同时在后端使用 PostGIS、ArcGIS Server 或其他 GIS 服务进行复算。

检查清单：上线前确认这些点

• 是否确认 Cesium 获取到的是有效地表坐标？
• 是否把 Cartesian3 正确转换成经纬度？
• 是否使用 [经度, 纬度] 顺序传给 Turf.js？
• 是否保证 Polygon 外环首尾闭合？
• 是否在点数少于 3 个时禁止计算？
• 是否明确 turf.area() 返回单位为平方米？
• 是否根据业务显示平方米、平方公里、公顷或亩？
• 是否测试了凹多边形、重复点、快速点击、撤销点等交互情况？
• 是否对跨 180° 经线、大范围区域、极区附近区域做了特殊说明或限制？
• 是否用一个已知面积的样例地块做过结果校验？

FAQ：Cesium多边形面积计算常见问题

1. Cesium多边形面积怎么算最简单？

最简单的方式是：Cesium 负责鼠标取点和绘制多边形，Turf.js 负责计算面积。把 Cesium 点击得到的坐标转换为 GeoJSON Polygon，然后调用 turf.area(polygon) 即可得到平方米面积。

2. Turf.js计算面积需要什么坐标系？

Turf.js 使用 GeoJSON 坐标，通常是 WGS84 经纬度，坐标顺序为 [经度, 纬度]。不要直接传 Cesium 的 Cartesian3，也不要写成 [纬度, 经度]。

3. turf.area 返回的单位是什么？

turf.area() 返回单位是平方米。显示平方公里时需要除以 1000000，显示公顷时需要除以 10000，显示亩时可除以约 666.6666667。

4. 为什么我算出来的面积特别大或特别小？

优先检查三个问题：坐标顺序是否写反、Polygon 是否闭合、点击点是否有效。很多 Cesium多边形面积计算异常，都是因为把 [lon, lat] 写成了 [lat, lon]。

5. Cesium 的 PolygonGraphics 能直接给面积吗？

Cesium 的 PolygonGraphics 主要用于实体显示和渲染，并不是一个专门的 GIS 面积分析接口。实际项目中更推荐将顶点坐标转换为 GeoJSON，再交给 Turf.js、PostGIS 或其他 GIS 工具计算。

6. 这个方法适合计算真实地表面积吗？

对于常规 WebGIS 量测、地块范围、园区边界、巡检区域，Turf.js计算面积通常够用。但如果要求严格考虑地形起伏表面积，或者用于高精度测绘成果，应采用更专业的测量模型和数据处理流程。

结论：Cesium + Turf.js 是前端面积量测的实用组合

总结一下，Cesium多边形面积怎么算并不复杂，关键是不要把“显示多边形”和“计算多边形面积”混在一起。Cesium 负责三维场景交互，Turf.js 负责 GeoJSON 空间计算，两者分工清晰，代码也更容易维护。

实际开发时，请重点检查 Cartesian3 转经纬度、GeoJSON 坐标顺序、Polygon 闭合、面积单位换算 这四个环节。只要这几步正确，使用 Turf.js计算面积就可以满足大多数 Cesium WebGIS 项目的前端量测需求。