Rotation of a polygon

[amitb...@gmail.com]

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 ?

[Omar Shehata]

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:

https://github.com/AnalyticalGraphicsInc/cesium/issues/7410

[amitb...@gmail.com]

Hi,

You can find the polygon code in the given link

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=fVRdT9swFP0rVvdAKhU3aZumtKUadExDQhtijJdlmtzkprVw7ch2CgHx33edJjSANPfl3mOfcz+bHdNkx+EBNDklEh7IEgwvtvSuwryjpHKXSlrGJeij7iyWsdwhSyvLLFeSVEhWyKTy1mBv6ps7JgrwuuQ5lgTPK+GUkFQlxRakpfj8QoAzz8vL1Is71Sv4i0Dc6dKdk3ABrAZbaElypg18FYpZr9FzKb24HDCvKmuKZG45GMrS1Kuj50qUayWnTTbubDhoppNNSaZN3UumLVpMDmmm1fYLrDWAOdOald5vchyF9GTsR8PI75FhRIOJP5qE416Fh9FkEoY1Pg7CYVDjo8GJP6jxcBBNogYfR9G4xoPxKBgddEZBjQ+G0WhY45PRZNDgvu+Px3+6vUMxW2yb5ky0alFCaXp+9euCPnC7ORP5hnk+Ddss8zot5LXmv2RCrFhyf61VDtqW3vu59kjGhAGnFdvYwqPVRQrpN+DrjUWtoe9TvxUoEcwYnvGkkrgtc2gl+uGO3l7c3Jxdft/zcbov+8VrDflJqe2t8t6NvDvr9DpzY0sBiz35M9/mSltSaOFR2rewzQW2yvRXRXIPlibGOO15vyHNU74jPD2NO++WP+7sq8CbrBDiJ3+CuLOY9/H9GxpuZ8rl+scOtGCle7IJFld7kFI676P7kWWVwo7rlqL7Vb17U487nxLMSStxzSQI8pwrw13npoStjBKFhRmxKp+SIMwfZ0RAZhvbzXStVSHT6acsy2b4h0pdXlOC12RSPVE6BX2sMd/CVPisHkId/dCqOsf/dOy1GEIqfutpqwTsbMoNzqWckpVQyf1s4ZZqH9FRFtXuwUEMYS7zwhKL24Jqmsk1TmMv3f6GkC2XCB0HvrPZI9qVaSzkaOOS+iG61Yem8tFrIjRzsK7Kfw

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.

[Omar Shehata]

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:

https://glitch.com/edit/#!/reflective-wire?path=views/index.html:22:21

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!

[amitb...@gmail.com]

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 ?

[Omar Shehata]

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:

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html

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

[amitb...@gmail.com]

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.

[Omar Shehata]

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