Rotation of a polygon

CesiumJS
1

I have added a polygon and tried rotating it mouse movement. I tried stRotation but it was not working. Is there any other way to rotate the polygon ?

2

Can you share the code you’ve tried? Perhaps as a Sandcastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) example that I can also run?

This GitHub issue has an example of rotating a polygon:

3

Hi,

You can find the polygon code in the given link

And the Github example shared by you for rotation a polygon, is actually for rotation of a rectangle. It has worked for me but I need the rotation for the polygon.

4

Ah, I see what you mean now. The stRotation only works for the texture or material on the polygon, not the actual geometry.

Unfortunately, CesiumJS does not expose a modelMatrix on entities, which we could have constructed here to apply a local transformation to rotate it. What you can do is rotate the points themselves with a callback property. The easiest way to do that is probably using Turf.js’s rotate function:

http://turfjs.org/docs#transformRotate

Since you can’t include JavaScript libraries in Sandcastle I put together a demo on Glitch:

https://reflective-wire.glitch.me/

You can see the code for it here:

And just in case I accidentally delete that example, here’s the full code using Turf to rotate the polygon:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var rotation ;

var lastRotation;

var lastPoints;

function getRotationValue() {

rotation = document.getElementById(“rotate_ent”).value;

rotation = parseFloat(rotation);

if (rotation === lastRotation) {

return lastPoints;

}

lastRotation = rotation;

var poly = turf.polygon([[ [-75.9607370, 37.1804856], [-75.9578855, 37.1861531], [-75.9542902, 37.1852787], [-75.9546776, 37.1816414], [-75.9578841, 37.1823743], [-75.9584821, 37.1800066], [-75.9607370, 37.1804856] ]]);

var rotatedPoly = turf.transformRotate(poly, rotation);

var pointsArray = ;

for(let point of rotatedPoly.geometry.coordinates[0]) {

pointsArray.push(point[0]);

pointsArray.push(point[1]);

}

lastPoints = Cesium.Cartesian3.fromDegreesArray(pointsArray);

return lastPoints;

}

viewer.entities.add({

polygon: {

hierarchy : new Cesium.CallbackProperty(getRotationValue, false),

material : Cesium.Color.BLUE.withAlpha(0.5),

extrudedHeight : 300.0,

classificationType : Cesium.ClassificationType.TERRAIN

}

});

viewer.zoomTo(viewer.entities);

``

Hope this helps!

5

It’s working. Thank You so much.

But now how can I rotate the polygon with mouse movement instead of rotating it from the input of the range bar ?

6

You can get the mouse position with regular JavaScript or with Cesium’s event handlers:

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
console.log(movement);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

You can see examples of using this on Sandcastle, here’s one that lets you draw with the mouse:

You might also need a way to convert from screen coordinates to 3d world coordinates and back. If so, check out the functions I describe in this post:

https://groups.google.com/d/msg/cesium-dev/_7TNqlMmKu8/jiDd0YgpAgAJ

7

Hi,

Here for a single polygon, this is rotating is working properly. But how to rotate the selected polygon when there are multiple polygons are there on the map ?

The issue which I’m facing is that when using turf.polygon([coordinates]) while trying to rotate a polygon, all the polygons which are present on the map are merging into single polygon.

8

I think you’ll need to keep them in an array/list and run turf.polygon() on each list of coordinates separately.