mapbox / mapbox/mapbox-gl-js

Camera height calculation problem

Open
#11,914 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 2.6.0

**browser**: Chrome 101.0.4951.54

### Question

When I set to the maximum zoom and to the maximum Pitch, I get the camera height, and then set the same height. At this time, I find the camera height is inconsistent with that of the front and rear cameras.
here is my code:

```
map.on('click', () => {
const camera = map.getFreeCameraOptions();
const coord = new mapboxgl.MercatorCoordinate(camera._position.x, camera._position.y,
camera._position.z).toLngLat();
const height = new mapboxgl.MercatorCoordinate(camera._position.x, camera._position.y,camera._position.z).toAltitude();

console.log(height);
camera.position = mapboxgl.MercatorCoordinate.fromLngLat([coord.lng, coord.lat],
height);

map.setFreeCameraOptions(camera);

const camera2 = map.getFreeCameraOptions();
const height_new = new mapboxgl.MercatorCoordinate(camera2._position.x, camera2._position.y,camera2._position.z).toAltitude();
console.log(height_new);
})

```

and then the result:

![image](https://user-images.githubusercontent.com/44514114/169437506-308bde3b-c4b2-492b-b0a6-6cc82112724c.png)

### Solution

![image](https://user-images.githubusercontent.com/44514114/169438176-6ba4d44e-d1ca-42ac-ab19-73600f0790cd.png)

I found there was a problem calculating the camera height in this method and distToCenter didn't take camera.forward() into account, so I changed it to this,And it worked:

![image](https://user-images.githubusercontent.com/44514114/169439073-d74d8b32-66bc-4800-b8ec-0c5bdd02b403.png)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The report points to MercatorCoordinate conversion, getFreeCameraOptions/setFreeCameraOptions, and distToCenter/camera.forward. Start by tracing those camera-height calculations and reproducing the maximum-zoom, maximum-pitch case. Done means the altitude remains consistent after resetting the free-camera position, with regression coverage if the project has a suitable test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.