antvis / antvis/L7Draw

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

Open
#189 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
52
Forks
35
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Bug description [Please make everyone to understand it]
绘制的多边形出来显示的面积和我使用turf计算的面积不一样

> Please provide a link by forking these links [L7 Draw](https://codesandbox.io/s/l7draw-issue-template-df75t7) or GitHub repo, a minimal reproduction.

- _Required_ **Link to minimal reproduction**:
- 我使用turf计算的代码:
```javascript
const coordinates = drawInstance.getData()[0].geometry.coordinates[0]
const poly = polygon([coordinates])
const areaValue = area(poly)
```
我的areaOptions
```javascript
const areaOptions = {
format: (squareMeters: number) => {
return squareMeters > 1000000
? `${+(squareMeters / 1000000).toFixed(2)}km²`
: `${+squareMeters.toFixed(2)}m²`
}
}
```

getData获取到的数据
```javascript
[
{
"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

![Image](https://github.com/user-attachments/assets/3f757654-f25b-472f-a335-c48dcd3c1bf2)
antv的计算结果

![Image](https://github.com/user-attachments/assets/d8422d63-2a57-41d6-b042-18f118fe07e5)
我使用turf的计算结果

### 🚑 Any additional [like screenshots]

- **L7Draw Version**:3.1.5
- **Platform**:MacOSX

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the polygon area display implementation and compare its result with Turf 7.2.0 using the coordinates returned by getData(). Review the areaOptions.format function and the supplied screenshots and coordinate data. Done means the displayed area and the Turf calculation agree, or the documented difference is explained and covered by a reproducible test.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.