square gets distorted

CesiumJS
1

hi,

I need to draw identical 2d rectangles on the ground. their dimensions are m × n meters. my starting point for drawing a single square is this:

const { lat, lng } = position;
const dim = 0.001;
const rect = viewer.entities.add({
  name: 'id',
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        lng - dim, lat - dim,
        lng + dim, lat - dim,
        lng + dim, lat + dim,
        lng - dim, lat + dim
      ]),
    },
    material: Cesium.Color.WHITE,
    outline: false,
  }
});

I expected this to be a square, but the further away from the equator I place it, the more stretched it gets. my guess is that there is s.th. about cartographic coordinates that I don't fully understand yet.

→ is there a simple way to create rectangles with side lengths specified in meters?

thanks a lot in advance!

2

Hello,

Our polygons are drawn following ellipsoid geodesic lines, which is the shortest distance along the ellipsoid between the two points. This might be why you think the polygons look distorted. In 2D mode, the lines will look curved because of how the 3D sphere is projected into 2D.

I think using a Rectangle instead would fix your problem: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Rectangle.html&label=Geometries

Rectangles flow rhumb lines, which means they have a constant bearing relative to the latitude and longitude lines. These look curved in 3D but straight in 2D.

We do eventually plan on adding rhumb line support to polygons. We have an issue written up here: https://github.com/AnalyticalGraphicsInc/cesium/issues/4000

Best,

Hannah

3

thanks for your reply hannah.
I had tried rectangles before – same thing. will look into loading the rectangle from a 3d model file.

another remaining question rhough is the following: I would like to distribute objects on the ground within a certain radius from a point. but doing

const pos = {
  lng: lng + (Math.cos(rndAngle) * rndDist),
  lat: lat + (Math.sin(rndAngle) * rndDist),
};

obviously suffers from the same distortion and results in an ellipse rather than a circle. would you know of a way how to achieve this?

4

thanks for your reply hannah.
I had tried rectangles before – same thing. will look into loading the rectangle from a 3d model file.

this works.

another remaining question rhough is the following: I would like to distribute objects on the ground within a certain radius from a point. but doing

const pos = {
  lng: lng + (Math.cos(rndAngle) * rndDist),
  lat: lat + (Math.sin(rndAngle) * rndDist),
};

obviously suffers from the same distortion and results in an ellipse rather than a circle. would you know of a way how to achieve this?

I figured it out:
in order to get a true circle you have to project to 2d first, before you calculate the positions for new points, and then back to geographic coordinates.