Image as material in polygon entity

CesiumJS
1

I am trying to fill a polygon with an image. The following code runs without error but fills the polygon with white rather than the image.

2

You can just assign an entity material via a url directly: thebox.material = ‘…/…/SampleData/models1125/eastwestalley.jpg’;

Or better yet, just add “material: thebox.material =’…/…/SampleData/models1125/eastwestalley.jpg’” as a constructor option like you have for the other parameters.

I would recommend you check out the Visualizing Spatial Data tutorial which covers this and a lot of other standard features of the Entity API.

3

That was easy

That was easy. Much Thanks.

I will definitely go though the tutorial as you suggest.

4

Hi,

Another minor issue, It seems that the image is being drawn horizontally. Is there some way to draw it with bottom along the first side of the polygon?

Thanks,

5

You can rotate the polygon using the stRotation property on PolygonGraphics. This rotation is counter-clockwise from north. If you want it to align with a specific edge, you should just be able to compute the angle of rotation based on the two points making up the edge you want to align with. I through together this quick and dirty example but the math is not completely correct (I’m still not completely awake :). Also keep in mind that at some point the curvature of the earth will probably come into play.

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

var entity = viewer.entities.add({

name : ‘Blue polygon with holes and outline’,

polygon : {

hierarchy : {

positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 39.0,

-98.95, 38.95,

-98.95, 39.0,

-99.0, 39.0])

},

material : ‘…/images/checkerboard.png’

}

});

var cartographicStart = Cesium.Cartographic.fromDegrees(-99.0, 39.0);

var cartographicEnd = Cesium.Cartographic.fromDegrees(-98.95, 38.95);

var deltaY = cartographicEnd.latitude - cartographicStart.latitude;

var deltaX = cartographicEnd.longitude - cartographicStart.longitude;

entity.polygon.stRotation = -Math.atan2(deltaY, deltaX);

viewer.zoomTo(viewer.entities);

Hope that helps.

6

Thanks again,

I think the problem is sort of the reverse. We are porting some Google Earth stuff and are getting down to the last elements. The polygons in question are city blocks and in this case the specific image is the underlying street with an ally running down the middle. I attached an image of a GE view. We need the alley to run down the middle of the block. The geography of the block is fixed. I can rotate the street image on a block by block basis, but being able to align the street image with a side would make life much easier.

analley.jpg

7

I have the same issue, when I try to add image to polygon I see white, but not image.

Below is simple code which I'm trying. Did I miss any syntax or do I've to set Repeat property somewhere?

var greenPolygon = viewer.entities.add({
    name : 'Green extruded polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 40.0]),
        extrudedHeight: 500000.0,
        /*material : Cesium.Color.GREEN,*/
    material : "https://cesiumjs.org/Cesium/Build/Documentation/images/CesiumLogo.png",
        closeTop : false,
        closeBottom : false
    }
});

8

Hello,

The image material is working properly for me with the code example you provided. For polygons, we extrude the texture down the wall of the polygon, so it may look differently than you expect.

If you’re going to have both closeTop and closeBottom = false, you may want to consider using a wall instead: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Wall.html&label=Geometries

The image will wrap around the sides of a wall.

Best,

Hannah

9

Thanks,
I see screenshot as : https://snag.gy/KJ6yqp.jpg

Is there anything by which we resize image on that polygon? I want to see that image on side of the polygon. I want to use polygon only. Any suggestions?

10

In order to achieve this for a polygon you will have to change the way the texture coordinates are computed. Using a Wall instead is the best solution here.

-Hannah

11

Wall works well for Image material. Can we use youtube URL as material?

12

We do have support for video materials. See this example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Video.html&label=Showcases

-Hannah

13

Hello, is there a way to do this but with GeoJsonDataSource polygon?