Multiple conjoined pollygons

CesiumJS
1

Hello all,

I’m trying to code up an application to visualize satellite beams from geostationary orbit.
The outline of the beam can now, as a test, be selected by the user by clicking on the map.
So far I can display this outline on the globe (in red).

I also wanted to display the beam itself, from the satellite to the ground. This is where I run into trouble.

The positions where the user clicked are in a list. As a sample:
var coordinateList = [{ "long": "1.9163", "lat": "46.0805" }, { "long": "10.0365", "lat": "47.9930" }, { "long": "12.8701", "lat": "40.9665" }];

This global constant is defined for convenience:
var GEO_ORBIT = 42157000.0;

The position of the satellite is set in the variable:
var satellitePosition = 4;

Now to display the satellite beam I have this piece of code:

        // plot a sattelite cone
        if (coordinateList.length > 2) {
            for (var i = 1; i < coordinateList.length; i++) {
                var arr = []
                // base point 1
                arr.push(coordinateList[i-1]["long"]);
                arr.push(coordinateList[i-1]["lat"]);
                arr.push(0);

                //satellite point
                arr.push(satellitePosition);
                arr.push(0);
                arr.push(GEO_ORBIT);

                // base point 2
                arr.push(coordinateList[i-1]["long"]);
                arr.push(coordinateList[i-1]["lat"]);
                arr.push(0);

                var a = viewer.entities.add({
                    name: "satellite beam "+i,
                    polygon: {
                        hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(arr),
                        perPositionHeight: true,
                        material: Cesium.Color.CYAN.withAlpha(0.2),
                        outline: true,
                        outlineColor: Cesium.Color.BLACK,
                    },
                });
            }
        }
        if (coordinateList.length > 1) {
            var arr = []
            // first point
            arr.push(coordinateList[0]["long"]);
            arr.push(coordinateList[0]["lat"]);
            arr.push(0);

            //satellite point
            arr.push(satellitePosition);
            arr.push(0);
            arr.push(GEO_ORBIT);

            // last point
            arr.push(coordinateList[coordinateList.length-1]["long"]);
            arr.push(coordinateList[coordinateList.length-1]["lat"]);
            arr.push(0);

            var a = viewer.entities.add({
                name: "satellite beam close",
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(arr),
                    perPositionHeight: true,
                    material: Cesium.Color.CYAN.withAlpha(0.2),
                    outline: false,
                    outlineColor: Cesium.Color.BLACK,
                },
            });
        }

My viewer:

    var viewer = new Cesium.Viewer("cesiumContainer", {
        // baseLayerPicker: false,
        timeline: false,
        animation:false
    });

The result is that only the code in if (coordinateList.length > 1) is displayed:

afbeelding
afbeelding865×939 318 KB

Does someone have an idea to why this is happening and how to resolve it?

I’m currently using version 1.72 in firefox 80.0 (64-bit version),
although chrome Version 85.0.4183.83 (Official Build) (64-bit) gives the same result.

Kind regards,
Wally

2

You are repeating base point 1 as base point 2 (both indexing into coordinateList[i-1]). Switching to [i] for base point 2 yields the desired result.

1 Like
3

Big oof. :roll_eyes:

Thank you Scott. I really should have spotted this.
I guess I had some confirmation bias. Or the late hours :sweat_smile: