Polygon drawn in 3d but not 2d in Middle East but in both 3d and 2d in Florida

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

In 2d mode, attempting to use a callback to dynamically update a polygon in the Middle East and do the same in Florida. It works in florida but not in the middle east. I suspect altitude to be an issue even though its a 2d rendering. After playing with some a snippets of the data used to draw the polygon in both locations, I stumbled across this problem and suspect it may be the reason the callback only periodically shows the polygonin the middle east(for a couple seconds every 2 or three minutes of updating) but always in Florida.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

MIDDLE EAST (AT ALTITUDE) -

1)DOES NOT DRAW
var viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D});

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([69.14103508068031, 34.4370317376699, 10000, 69.13856255397852, 34.4373630031087, 10000, 69.13882892805812, 34.43860268353382, 10000, 69.1413492695559, 34.438261174482825, 10000]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

2)DOES DRAW
var viewer = new Cesium.Viewer('cesiumContainer');

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([69.14103508068031, 34.4370317376699, 10000, 69.13856255397852, 34.4373630031087, 10000, 69.13882892805812, 34.43860268353382, 10000, 69.1413492695559, 34.438261174482825, 10000]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

FLORIDA (AT SEA LEVEL) - BOTH CORRECTLY DRAW THE POLYGON

1)DOES DRAW
var viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D});

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-81.34480044854797, 27.662419817998558, 0, -81.34445210902024, 27.66424689298772, 0, -81.34191810875059, 27.663326524980686, 0, -81.3416722220044, 27.66022049670308, 0]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

2)DOES DRAW
var viewer = new Cesium.Viewer('cesiumContainer');

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-81.34480044854797, 27.662419817998558, 0, -81.34445210902024, 27.66424689298772, 0, -81.34191810875059, 27.663326524980686, 0, -81.3416722220044, 27.66022049670308, 0]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Use callback to dynamically update polgyons in both florida and middle east at altitude. Polygons are correctly updated in florida but not the middle east at high altitude.

4. The Cesium version you're using, your operating system and browser.
Cesium 1.5. 64bit i9 2.9ghz. Chrome.

2

I think this might be a bug. If I add height: 0 to the polygon, it renders fine in 2D mode. Here’s a Sandcastle.

But height = 0 should be the default anyway. Can you confirm that you’re seeing this too in your app? Does adding height : 0 fix the polygons that aren’t rendering? I’m assuming your callback property is updating the hierarchy positions, which will ignore the height value unless perPositionHeight is set I believe.

3

Omar,

Thanks for the reply. When I had put together this post, I was actually attempting to fix this exact example (with height set to 0 as opposed to 1000). Both height 0 and height 1000 continue to show me no polygon. The exact code is as follows:

var viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D});

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([69.14103508068031, 34.4370317376699, 0, 69.13856255397852, 34.4373630031087, 0, 69.13882892805812, 34.43860268353382, 0, 69.1413492695559, 34.438261174482825, 0]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

However I definitely can see the polygon being rendered with your sandcastle.

Based on this I tried two things:

1)I tried initializing the height to 0 and then reassigning it to 1000 within the viewers.entities.add function (as shown in the following) and it rendered - thus I don't think height is the issue.

var viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D});

var height = 0;

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        height : 1000,
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([
            69.14103508068031, 34.4370317376699, height,
            69.13856255397852, 34.4373630031087, height,
            69.13882892805812, 34.43860268353382, height,
            69.1413492695559, 34.438261174482825, height]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);

2)I then removed the line height : 1000 (the reassignment) and left the initialization of height to 0 OR 1000, it no longer renders. (As follows)

var viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D});

var height = 0;

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([
            69.14103508068031, 34.4370317376699, height,
            69.13856255397852, 34.4373630031087, height,
            69.13882892805812, 34.43860268353382, height,
            69.1413492695559, 34.438261174482825, height]),
        material : Cesium.Color.RED
    }
});

viewer.zoomTo(viewer.entities);