How to add an image map to a tilted quad

CesiumJS
1

I hope to get the effect of P1, but in fact he can only get the effect of the black box of P2by code

    var entity2 = viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(positions),
            material: new Cesium.ImageMaterialProperty({
                image: "path to png",
                transparent: true
            })
        }
    });

1700115297842
17001152978421372×636 81.1 KB

2

Set texture coordinates for the polygon, see: Sandcastle - Polygon, ref-doc - textureCoordinates

3

Thanks for your reply,but how could I get those Cartesian2

 textureCoordinates: {
      positions: [
        new Cesium.Cartesian2(0, 1),
        new Cesium.Cartesian2(0, 0),
        new Cesium.Cartesian2(0.5, 0),
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 1),
      ]
    }
4

Each coordinate point in polygon.hierarchy corresponds (in order) to the texture coordinate, which is a two-dimensional spatial coordinate system (as shown below) with u and v in the range 0 to 1, here is an example that I hope will help you. sandcastle
ss

5

Other shapes: sandcastle

ss1
ss1788×329 233 KB

6

Thanks again for your answer, I now have a new problem, my pictures are flipped up and down in some places. do you know how to solve it.

    var positions = Cesium.Cartesian3.fromDegreesArray([
        Number(126.961519),
        Number(46.207604),
        Number(127.865895),
        Number(46.031461),
        Number(127.617953),
        Number(45.424603)
        Number(126.722977),
        Number(45.599256)
    ]);

    var entity = viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(positions),
            perPositionHeight: true,
            material: new Cesium.ImageMaterialProperty({
                image: "./test.jpg"
            }),

        }
    });

655443248f90302dbc715456
655443248f90302dbc715456711×707 153 KB

1

7

Rearrange the order of coordinate points in positions.

8

I don’t think it’s an issue with the order of the points,If I use perPositionHeight: false,it’s direction will be right，but it will be incompletely displayed

2
2948×634 123 KB

9

Hi @dingweida390,

Textured polygons are not recommended for displaying geolocated imagery due to the precision needed.

Does SingleTileImageryProvider work for your use case?

10

I guess not, it only supports rectangular range