Image projection onto a polygon

CesiumJS
1

I was wondering how Cesium projects an image onto a polygon. I do not have an example available but here is the general idea…

The CZML is a polygon with cartographicDegrees defined using 4 corners of a square withe the following material:

“material” : {
“image” : {
“image” : {
“uri” : “…”
},
“alpha” : 0.9
}
}

``

If outline is turned on… one observation is that the line segments of the polygon is following a great arc. The image seems to be stretched following the great arc… maybe (?).

If more interpolation is done and the polygon CZML has more points to have the segments follow constant lat/lon, one observation is the image is clipped.

2

Hello,

The polygon does follow a great arc. We also have a Rectangle geometry type that follows the lon/lat lines. Would that be better for what you’re trying to do? Here is an example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Rectangle.html&label=CZML

If not, can you give me a little more information? I don’t see the image stretching you’re talking about. Here is a code sample. It’d be helpful if you could alter the positions to replicate the warping you’re seeing:

var czml = [
{
“id” : “document”,
“version” : “1.0”
}, {
“polygon” : {
“positions” : {
“cartographicDegrees” : [
-110.0, 35.0, 0,
-110.0, 32.0, 0,
-102.0, 32.0, 0,
-102.0, 35.0, 0
]
},
“outline” : true,
“outlineColor” : {
“rgba” : [0, 0, 0, 255]
},
“material” : {
“image” : {
“image” : { “uri” : “…/images/Cesium_Logo_Color.jpg” },
“alpha” : 0.9
}
}
}
}
];

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);

``

Thanks,

Hannah

3

Hi, Hannah, Thanks again for the response! From the example below, if the polygon is not smaller than the image, it would crop it and not scale down the image. Is there a way for a polygon to follow constant lat/lon instead of a great arc?

var czml = [

{

“id” : “document”,

“version” : “1.0”

}, {

“id”:“squeeze”,

“polygon” : {

“positions” : {

“cartographicDegrees” : [

-110.0, 35.0, 0,

-100.0, 35.0, 0,

-100.0, 20.0, 0,

-110.0, 20.0, 0

]

},

“outline” : true,

“outlineColor” : {

“rgba” : [0, 0, 0, 255]

},

“material” : {

“image” : {

“image” : { “uri” : “…/images/Cesium_Logo_Color.jpg” },

“alpha” : 0.9

}

}

}

},

{

“id”:“trapezoid”,

“polygon” : {

“positions” : {

“cartographicDegrees” : [

53, 60, 0,

79, 60, 0,

79, 39, 0,

53, 39, 0

]

},

“outline” : true,

“outlineColor” : {

“rgba” : [0, 0, 0, 255]

},

“material” : {

“image” : {

“image” : { “uri” : “…/images/Cesium_Logo_Color.jpg” },

“alpha” : 0.9

}

}

}

}

];

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var dataSource = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSource);

``

Seems like rectangle would be a good solution. Honestly, I didn’t know it was part of the czml schema. CZML Content Page, is this still where the schema is located? I don’t see rectangle part of it.

4

Happy to help =)

The solution for having it follow a constant lat/lon instead of a great arc would be to use a Rectangle instead.
I don’t think there’s a way to have either geometry type crop the image instead of scaling it though.

I’m surprised Rectangle isn’t documented on the CZML content page. That document is a work in progress though and is due for a major rewrite. I think other supported geometry types are missing from it also. The CZML sandcastle examples we added last year are a good way to see the different things you can do with CZML.

-Hannah