CesiumGS / CesiumGS/cesium

In SCENE2D mode, how to remove the black edge of the map?

Open
#9,345 3 comments 0 reactions 0 assignees View on GitHub
category - 2d / columbus view type - bug
Dominant language
JavaScript
Stars
15.7k
Forks
3.9k
Avg merge
4d 6h
Merged PRs (30d)
34

Description

Sorry, I can't access https://community.cesium.com, so I'm asking here.

In SCENE2D mode, How to remove the black edges(shown in the following screenshot) or limit the camera to see only the region of the earth?

I tried to write an [example](https://sandcastle.cesium.com/#c=jVPva9swEP1XRD454MpsH5s4jGaBDdIlLFu3gKEo8tnRph9GktN4o//7ZClunTiF4S++u/fe3dNJVElj0YHBE2iUIglPaA6G1QI/+FyUjaiP50pawiTobBSjv5lEiEgmiGVK3qKCcANxm9wRA0vSgF4z+ht0v1TUnBuqAeRdbe05rQRFVX6O3ysBQySThbpTx37KMgHcjdbPSXJgpZ/uE/BqKGMoSLh3LW87v5sugzfzxZfF+4+ZfB5PMtl+rEBROCPsiVg4HErT9E3yOJzRGanS8L3KiQVM8nxxAGmXzFhX0ZEHoHQWWAhRvxZBjnOldO4Wc2pLqrVWv4C2xpye/40CBfWXNyfaqlKTas9odE/sHq8/x13xFD+uHhZfH7/9WI2DQDD72p0SAZq89A7hpI8odG1sLRwkFPEpcSEkmPzpMDedHXxENx0Xcyjs5MJ0i74K1qzc26H69ky96RF2yi1eXOpv+/p9uFXVq3qwVCnD/GkfUXp2gJQTUUUDVOztxt7GeHJdqvkvqcZLbb3UNkj5C/k8ikdTYxsOs27zH5iolLao1jzCOLEgKu7umUl2tXuFFlNjulmmSZ86zdkBsTy98sqRm8oYV2nf7Yb9gWw0myYOP6ByRXImy9UBNCdNC9u/my1DEmM8TVx4nWmV4juiL5T/AQ), which seems to solve the problem, but when the camera is very far away from the ground, the map will shake.

```js
const viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
timeline: false,
navigationHelpButton: false,
sceneMode: Cesium.SceneMode.SCENE2D
});

if (viewer.scene.mode === Cesium.SceneMode.SCENE2D) {
viewer.scene.preUpdate.addEventListener(scene => {
const maxCoord = scene.mapProjection.project(
new Cesium.Cartographic(Math.PI, Cesium.Math.PI_OVER_TWO)
);

const camera = scene.camera;
const frustum = camera.frustum;

const minX = -maxCoord.x - frustum.left;
const maxX = maxCoord.x - frustum.right;

const minY = -maxCoord.y - frustum.bottom;
const maxY = maxCoord.y - frustum.top;

camera.position.x = Cesium.Math.clamp(camera.position.x, minX, maxX);
camera.position.y = Cesium.Math.clamp(camera.position.y, minY, maxY);
});
}
```

![image](https://user-images.githubusercontent.com/43558998/105962890-4bb16580-60bb-11eb-9c10-73e8e91d3cfd.png)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the linked Sandcastle example in Cesium.SceneMode.SCENE2D, especially at a far camera distance. The issue provides no repository file or test entry point, so investigation would need to trace the scene camera, map projection, frustum, and preUpdate behavior. Done would mean removing or limiting the black map edges without introducing visible map shaking.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.