CODEWITHSUNDEEP
cesiumjs
swiss_knight
swiss_knight

Reputation: 7831

Cesium GeoJSON datasource polygon material is white despite an image is specified

I am not able to figure out a way to change the material of a polygon entity from a GeoJsonDataSource. I would like to apply an image.

Here is an example using a color because I don't know how to embed an image on the online sandcastle:

var viewer = new Cesium.Viewer("cesiumContainer");

const poly = {
    "type": "FeatureCollection",
    "name": "MyPolygon",
    "crs": {"type": "name",
            "properties": {
                "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }},
    "features": [
        {"type": "Feature",
         "properties": {},
         "geometry": {
             "type": "Polygon",
             "coordinates": [
                 [[ 10.746500009923748, 48.314700009648320, 500 ],
                  [ 10.747500009924019, 48.315700009648104, 500 ],
                  [ 10.747038310965864, 48.315905422444722, 550 ],
                  [ 10.746038315853207, 48.314905418639555, 550 ],
                  [ 10.746500009923748, 48.314700009648320, 500 ]] 
]}}]};

const Promise0 = async () => {
    try {
        const dataSource = await Cesium.GeoJsonDataSource.load(poly, {
            stroke: Cesium.Color.BLUE,
            strokeWidth: 3
        });
        const Promise1 = async () => {
            try {
                const polygonalFrame = await viewer.dataSources.add(dataSource);
                viewer.zoomTo(polygonalFrame);
                const entities = polygonalFrame.entities.values;
                for (var i = 0; i < entities.length; i++) {
                    const entity = entities[i];
                    entity.polygon.material = new Cesium.Material({
                        fabric : {
                          type : 'Color',
                          uniforms : {
                            color : new Cesium.Color(1.0, 0.0, 0.4, 0.5)
                          }
                        }
                      });
                }
            }
            catch (err) {
                console.log("Error: ", err);
            }
        };
        Promise1();
    }
    catch (e) {
        console.log("Error:", e);
    }
};
Promise0();

The polygon remains yellow, which is the default color I think.

For the image material, I use this definition locally:

new Cesium.Material({
    fabric : {
        type : 'Image',
        uniforms : {
            image : './image.png'
        }
    }
});

Upvotes: 1

Views: 1050

Answers (1)

swiss_knight
swiss_knight

Reputation: 7831

I fixed it using this way of defining the PolygonGraphics' material in my entity:

new Cesium.ImageMaterialProperty({
    image: './image.png',
    alpha: 0.5
});

But I noticed that alpha blending doesn't work when I try to apply it on my whole image...

Upvotes: 1

Related Questions