'Offsetting Cesium zoom by pixels

In the UI we have a floating panel occupying the 30% - 40% percent of the screen width and we have a Cesium background map. The mock image below has dots. At the moment we can zoom the view, so that all dots are visible on the screen.

Cesium map with UI control mockup and example points

The logic is simple, we just find the top-left and bottom-right corners of the rectangle that covers all points.

const topLeft = Cartographic.fromDegrees(
  flyTo.minLongitude,
  flyTo.minLatitude,
  0,
)
const bottomRight = Cartographic.fromDegrees(
  flyTo.maxLongitude,
  flyTo.maxLatitude,
  0,
)
const rectangle = Rectangle.fromCartographicArray([topLeft, bottomRight])
viewer.camera.flyTo({
  destination: rectangle,
  duration: flyTo.duration ? flyTo.duration : 0.1,
})

The problem is that the points are under UI controls. We would like to offset the zoom, so that instead of zooming to the center of the screen it would zoom all points to be visible on the right side.

Consider having only a single point. In the current implementation, it would be under the UI controls, but this is what we try to achieve.

Cesium map with point on the right side of the screen



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source