[Bug] 绘制的多边形出来显示的面积和我使用turf计算的面积不一样

[tbtnb]

问题描述

🐛 Bug description [Please make everyone to understand it]

绘制的多边形出来显示的面积和我使用turf计算的面积不一样

Please provide a link by forking these links L7 Draw or GitHub repo, a minimal reproduction.

• Required Link to minimal reproduction:
• 我使用turf计算的代码：

   const coordinates = drawInstance.getData()[0].geometry.coordinates[0]
   const poly = polygon([coordinates])
   const areaValue = area(poly)

我的areaOptions

const areaOptions = {
  format: (squareMeters: number) => {
    return squareMeters > 1000000
      ? `${+(squareMeters / 1000000).toFixed(2)}km²`
      : `${+squareMeters.toFixed(2)}m²`
  }
}

getData获取到的数据

[
	{
		"type": "Feature",
		"properties": {
			"id": "polygon-80",
			"isHover": false,
			"isActive": true,
			"isDrag": false,
			"isDraw": false,
			"createTime": 1748934351350,
			"nodes": [
				{
					"type": "Feature",
					"properties": {
						"id": "point-81",
						"isHover": false,
						"isActive": false,
						"isDrag": false,
						"createTime": 1748934351350
					},
					"geometry": {
						"type": "Point",
						"coordinates": [
							120.26191600075651,
							30.187804999610986
						]
					}
				},
				{
					"type": "Feature",
					"properties": {
						"id": "point-82",
						"isHover": false,
						"isActive": false,
						"isDrag": false,
						"createTime": 1748934351350
					},
					"geometry": {
						"type": "Point",
						"coordinates": [
							120.26228100070857,
							30.187753999614554
						]
					}
				},
				{
					"type": "Feature",
					"properties": {
						"id": "point-83",
						"isHover": false,
						"isActive": false,
						"isDrag": false,
						"createTime": 1748934351350
					},
					"geometry": {
						"type": "Point",
						"coordinates": [
							120.2629350006286,
							30.187461999625654
						]
					}
				},
				{
					"type": "Feature",
					"properties": {
						"id": "point-84",
						"isHover": false,
						"isActive": false,
						"isDrag": false,
						"createTime": 1748934351350
					},
					"geometry": {
						"type": "Point",
						"coordinates": [
							120.26227500070938,
							30.187001999613916
						]
					}
				},
				{
					"type": "Feature",
					"properties": {
						"id": "point-85",
						"isHover": false,
						"isActive": false,
						"isDrag": false,
						"createTime": 1748934351350
					},
					"geometry": {
						"type": "Point",
						"coordinates": [
							120.26179100077354,
							30.186977999609613
						]
					}
				}
			],
			"line": {
				"type": "Feature",
				"properties": {
					"id": "line-87",
					"isHover": false,
					"isActive": true,
					"isDrag": false,
					"isDraw": false,
					"createTime": 1748934351350,
					"nodes": [
						{
							"type": "Feature",
							"properties": {
								"id": "point-81",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.26191600075651,
									30.187804999610986
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"id": "point-82",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.26228100070857,
									30.187753999614554
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"id": "point-83",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.2629350006286,
									30.187461999625654
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"id": "point-84",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.26227500070938,
									30.187001999613916
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"id": "point-85",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.26179100077354,
									30.186977999609613
								]
							}
						},
						{
							"type": "Feature",
							"properties": {
								"id": "point-86",
								"isHover": false,
								"isActive": false,
								"isDrag": false,
								"createTime": 1748934351350
							},
							"geometry": {
								"type": "Point",
								"coordinates": [
									120.26191600075651,
									30.187804999610986
								]
							}
						}
					]
				},
				"geometry": {
					"type": "LineString",
					"coordinates": [
						[
							120.26191600075651,
							30.187804999610986
						],
						[
							120.26228100070857,
							30.187753999614554
						],
						[
							120.2629350006286,
							30.187461999625654
						],
						[
							120.26227500070938,
							30.187001999613916
						],
						[
							120.26179100077354,
							30.186977999609613
						],
						[
							120.26191600075651,
							30.187804999610986
						]
					]
				}
			}
		},
		"geometry": {
			"type": "Polygon",
			"coordinates": [
				[
					[
						120.26191600075651,
						30.187804999610986
					],
					[
						120.26228100070857,
						30.187753999614554
					],
					[
						120.2629350006286,
						30.187461999625654
					],
					[
						120.26227500070938,
						30.187001999613916
					],
					[
						120.26179100077354,
						30.186977999609613
					],
					[
						120.26191600075651,
						30.187804999610986
					]
				]
			]
		}
	}
]

我的turf版本是7.2.0

📷 Step to reproduce

🏞 Expected result

antv的计算结果

我使用turf的计算结果

🚑 Any additional [like screenshots]

• L7Draw Version:3.1.5
• Platform:MacOSX

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions]

hi @tbtnb, welcome!

[github-actions]

Hi @tbtnb, Please star this repo if you find it useful! Thanks ⭐!
你好～ @tbtnb 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[petercat-assistant]

您提到在使用 L7 绘制多边形时，显示的面积与使用 Turf.js 计算的面积不一致。这个问题可能与坐标系、投影方式或计算方法有关。以下是一些可能的原因和建议：

1. 坐标系和投影：

   • 确保 L7 和 Turf.js 使用相同的坐标系和投影方式。通常，地理坐标系（WGS84）和投影坐标系（如 Web Mercator）之间的转换可能导致面积计算的差异。

2. 计算方法：

   • Turf.js 的 area 函数计算的是平面面积，而 L7 可能使用了不同的算法来计算面积。请检查 L7 的文档，了解其面积计算的具体方法。

3. 精度问题：

   • 检查坐标的精度和格式，确保在传递给 Turf.js 和 L7 时没有精度损失。

4. 版本兼容性：

   • 确保使用的 Turf.js 版本与 L7 版本兼容，并查看是否有已知的 bug 或更新。

如果以上建议无法解决问题，您可以提供一个最小可重现的示例代码链接（例如在 CodeSandbox 上），以便更详细地分析问题。

如果您需要进一步的帮助，请随时告诉我！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[tbtnb]

我都是把他转换成高德的坐标系了，还是不一样

[lzxue]

我都是把他转换成高德的坐标系了，还是不一样

一样的数据计算也不一样吗，内部用的turf

[tbtnb]

我都是把他转换成高德的坐标系了，还是不一样

一样的数据计算也不一样吗，内部用的turf

是啊，你可以用我的代码试一下，很诡异