Creating plane/rectangle

Apparently in the function of drawRectangle() …?

Yes, Sandcastle link.


It outputs like this


I meant to create the polygon on the wall like this. Can I implement it?

You can create Plane if you know the building wall location. Check this sandcastle link for Plane functionality. But why do you wanna do this?

I want to decorate the surface of the wall so I would like to put a polygon on the wall freely by selecting the points.

I have used this “Plane” function before, but it can be created by the given parameters…I would rather like to produce a polygon from points.

Anyway Thank you so much for your help…

Instead, can I get the properties of the point I select, such as latitude or longitude?

Yes you can by adding these codes in the sandcastle link:

 /* GET LON,LAT,ALT*/
  let cartographic = Cesium.Cartographic.fromCartesian(adaptivePosition);
  let lon = Cesium.Math.toDegrees(cartographic.longitude),
      lat = Cesium.Math.toDegrees(cartographic.latitude),
      height = cartographic.height;
  
  console.log(lon, lat, height);
  /* END */

Check browser’s console…

  • Regards,
2 Likes

Thank you so much. By the way, I have also tried to retrieve properties of the points such as lat/lon/height like the link below.

Unfortunately, when I moved the mouse on the ground and tried to show the property, it was covered as it is shown in the picture. Do you know why it happened?
I copied the codes written in the link.

Sorry, I’m not able to generate this issue at my end. But it seems like you need to set disableDepthTestDistance property in label entity to keep it always in front of terrain, like:

label: {
        show: false,
        showBackground: true,
        font: "14px monospace",
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        pixelOffset: new Cesium.Cartesian2(15, 0),
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      }

Please let me know if it works or not.

  • Regards,

Thank you, it works now, but can I also make it appear height information as well?
It seems
var cartesian = viewer.camera.pickEllipsoid(…
does not give me height property.
However when I used
var cartesian = viewer.scene.pickPosition(movement.position);
It did not work.
Is there another option to get height information?
I am using Cesium.ScreenSpaceEventType.MOUSE_MOVE)

when I added the code above, it worked, thank you.

handler.setInputAction(function (movement) {
      /*var cartesian = viewer.camera.pickEllipsoid(
        movement.endPosition,
        scene.globe.ellipsoid
      );*/
      var cartesian = viewer.scene.pickPosition(movement.endPosition);
      if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitudeString = Cesium.Math.toDegrees(
          cartographic.longitude
        ).toFixed(10);
        var latitudeString = Cesium.Math.toDegrees(
          cartographic.latitude
        ).toFixed(10);
        var height = cartographic.height;

        entity.position = cartesian;
        entity.label.show = true;
        entity.label.text =
          "Lon: " +
          ("   " + longitudeString).slice(-15) +
          "\u00B0" +
          "\nLat: " +
          ("   " + latitudeString).slice(-15) +
          "\u00B0"+
          "\nHeight: " +
          ("   " + height);
      } else {
        entity.label.show = false;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
1 Like

Hello, I want to add the line in 3D, when I selected two points, using entities.add{} function.
Can I do this?

Yes you can do that as same as you’ve done above. Collect coordinates and draw Polyline. Check this sandcastle example.

  • Regards

Thank you, I would like to use the command below, var orangeOutlined = viewer.entities.add({
name:
“Orange line with black outline at height and following the surface”,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
39,
250000,
-125,
39,
250000,
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});

but I am not sure about the “position” part. What are the coordinates of the position supposed to be?

I don’t understand how to determine the normal vector for creating Plane,
https://cesium.com/learn/cesiumjs/ref-doc/Plane.html
how i can determine it ? how can I get cartesian coordinates of normal vector?

I’m not understanding what you exactly want to ask.
It is converting World coordinates(degrees) Array to Cartesian3 Array where -75 is longitude, 39 is latitude and 250000 is height/altitude. Cartesian3 is in the format of x,y,z
You can convert single coordinate to Cartesian3 by Cesium.Cartesian3.fromDegrees(-75, 39, 250000)

I hope it helps you. I request you to please create a separate post for separate topic.

  • Regards,