Zoom to Rectangle with some buffer around it

[atul-sd]

Hi, whenever I fly to a Rectangle, the camera tightly fits the Rectangle on screen like the image below -

But I want some buffer around the Rectangle so that Rectangle appear in the middle of the screen with some space around after the flight completes, something like this -

My Usecase: I’m trying to zoom to entities (polygon, line, etc) when the user clicks on it, flying to the entity is not good enough for me as it doesn’t zoom to the entity much (i tried a lower value of the range, but didn’t help). So I’m trying to get Rectangle for entity and zoom to the Rectangle. It’s working fine but as mentioned above, the camera fills the whole screen with an entity, I want to add some buffer so the entity appears in the centre of the screen.

[sam.rothstein]

Hi @atul-sd,

I recommend moving the viewing window further from the target object using the Camera object:

https://cesium.com/learn/cesiumjs/ref-doc/Camera.html?classFilter=camera

Updating Camera.position might do the trick.

Best,
Sam

[atul-sd]

Hi @sam.rothstein,

Thanks for your reply, can you please provide an example, I still couldn’t figure it out.

Edit 1

I tried to zoom out the camera once the flight is complete. It works but it’s not smooth as the camera zooms out suddenly after a smooth flight transition-

this.map.camera.flyTo({
    destination: bbox,
    duration: 3,
    orientation: {
        heading: 0.0,
        pitch: -CesiumMath.PI_OVER_TWO
    },
    complete: () => {
        const currentPos = this.map.camera.positionCartographic;
        // zoom out 30% from whatever height camera at
        currentPos.height = currentPos.height + (currentPos.height * 0.3)
        this.map.camera.position = Cartographic.toCartesian(currentPos)
    }
});

Regards,
Atul

[atul-sd]

Hi,

I got it finally working by finding the final position of the camera to view the rectangle and then subtracting height by 30% -

const rectCarto = Cartographic.fromCartesian(
    this.map.camera.getRectangleCameraCoordinates(bbox)
);
// zoom out 30% from whatever height camera at
rectCarto.height = rectCarto.height + (rectCarto.height * 0.3)
const destination = Cartographic.toCartesian(rectCarto)

this.map.camera.flyTo({
    destination: destination,
    duration: 3,
    orientation: {
        heading: 0.0,
        pitch: -CesiumMath.PI_OVER_TWO
    },
});

But now I’m facing another issue, when I try to zoom to a point, the camera goes below the terrain, how can I fix that?

[Jacky]

You can add offset values on the bbox to view rectangle. Check this example.

[atul-sd]

hi @Jacky, thanks for your response. I saw a similar solution on Stackoverflow and tried it but it was not working correctly for me for some reason, so I resorted to the above solution

[Jacky]

But my given example is working…

[atul-sd]

Yup, appreciate that. I’ll try it out in my code.

[sam.rothstein]

[atul-sd]

Hi @sam.rothstein ,

I tried my above solution with a couple of different custom terrains and it doesn’t work properly. While flying, the camera goes under the terrain instead of keeping the rectangle in view. I found one Github issue referring to the same issue - flyTo with Rectangle doesn't play well with terrain · Issue #9106 · CesiumGS/cesium · GitHub

I even tried zooming into the rectangle directly which is supported by Cesiumjs without any extra code and the issue still persists.

Is there any solution to this problem?

PFA screen recording - zoom-issue.mp4 - Google Drive

Regards,
Atul

[Jacky]

Please check this similar post.

[sam.rothstein]

Thanks, @Jacky! @atul-sd, please give this a try.

[atul-sd]

Hi @sam.rothstein, I’ve already gone through that thread before posting my follow-up question, but the issue still persists. For some terrain, it works fine but for some, the height provided getRectangleCameraCoordinates is off and the camera goes under the terrain.