Rotate the image of a SingleTileImageryProvider

CesiumJS
1

Hi

We have a web app where a client can calibrate a map in the real world using Google Maps. The calibration is done using three pairs of “pixel - real coordinates”.

Our clients typically use maps that have been designed using the magnetic north as the real north so, when it is displayed over Google Maps it is rotated a bit:

We want to load the same image in Cesium. The input information is the image, the three pair of calibrated points and the image size. Using the SingleTileImageryProvider we can get the coordinates of the image corners and draw it on the map:

The problem here is that we have not been able to rotate the image and the map is not in the correct place. How can we add a map from an image that needs to be rotated?

Regards,

Jorge

2

Hello Jorge,

We don’t currently have support for rotating the SingleTileImageryProvider.

You can try using a rotated rectangle with a rotated texture:

viewer.entities.add({
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
material : new Cesium.ImageMaterialProperty({
image : ‘…/images/Cesium_Logo_Color.jpg’
}),
stRotation: Cesium.Math.toRadians(20),
rotation : Cesium.Math.toRadians(20),
}
});

``

We do a have a bug related to this: https://github.com/AnalyticalGraphicsInc/cesium/issues/2737

But if the degree of rotation is small like it would be for your use case the results should be fairly good.

Ultimately, I think the best solution would be to use a specific trapezoid geometry type, but we currently don’t have support for that. We have an issue written up here to add it: https://github.com/AnalyticalGraphicsInc/cesium/issues/4164

Best,

Hannah