Image material uv coordinate in Cesium?

CesiumJS
1

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

An image I created using a uniform latitude/longitude grid is not displayed correctly in Cesium. Here is an image showing the result: https://i.imgur.com/XOvheGD.jpg

The point labeled “ORP” should be co-located with where the red lines cross in the image.

Here is the image itself: https://i.imgur.com/riRqil1.png

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

// Point that should display at same location as central cross in image

entities.add({

parent : markers,

name : ‘Output Reference Point’,

position : Cesium.Cartesian3.fromDegrees(-83.506492, 42.230711),

point : {

pixelSize : 5,

color : Cesium.Color.RED,

outlineColor : Cesium.Color.WHITE,

outlineWidth : 2

},

label : {

text : ‘ORP’,

font : ‘14pt monospace’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth : 2,

verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

pixelOffset : new Cesium.Cartesian2(0, -9)

}

});

// Image overlaid on the globe

var pattern = viewer.entities.add({

parent : beamPatterns,

name: ‘Beam Pattern’,

polygon: {

hierarchy: Cesium.Cartesian3.fromDegreesArray([

-98.528961, 57.248043,

-98.528961, 27.213378,

-68.484023, 27.213378,

-68.484023, 57.248043]),

height: 0,

outline: false,

material: new Cesium.ImageMaterialProperty({

image: ‘cesium_vis_test.png’,

transparent: true

})

}

});

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

Trying to display an image that I compute that shows an intensity function over an area of the earth. I have a function in Matlab where I can plug in a lat/lon value and get an intensity. I need to then display that map on top of the earth in Cesium. I just created an image with the intensity mapped to a color in each pixel on a uniform lat/lon grid, which seemed like the way to go since a Rectangle is always aligned to the lat/lon grid.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.42

Windows 10

Chrome

2

Hi there,

This sounds like an issue with the projection of the image.

Try using a SingleTileImageryProvider instead- it’s designed to put imagery at a specific Rectangle on the earth’s surface with the correct projection. The following code works for me in Sandcastle.

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

// Point that should display at same location as central cross in image

viewer.entities.add({

name : 'Output Reference Point',

position : Cesium.Cartesian3.fromDegrees(-83.506492, 42.230711),

point : {

    pixelSize : 5,

    color : Cesium.Color.RED,

    outlineColor : Cesium.Color.WHITE,

    outlineWidth : 2

},

label : {

    text : 'ORP',

    font : '14pt monospace',

    style: Cesium.LabelStyle.FILL_AND_OUTLINE,

    outlineWidth : 2,

    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

    pixelOffset : new Cesium.Cartesian2(0, -9)

}

});

var layers = viewer.imageryLayers;

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({

url : 'https://i.imgur.com/riRqil1.png',

rectangle : Cesium.Rectangle.fromDegrees(-98.528961, 27.213378,  -68.484023, 57.248043)

}));

``

Thanks,

Gabby

3

Thanks for your help, Gabby!

I was using a SingleTileImageryProvider before, but I would like to add a toolbar button or menu to show/hide one or multiple such images. I figured out how to do that using an entity and having it belong to a parent, thus allowing me to turn several things on/off at once. Is it possible to do something similar with a SingleTileImageryProvider? I tried but couldn’t seem to get it to work.

4

Yep, it’s possible to show/hide/reorder ImageryLayers. See this example.

5

Thanks again, I will check that out.

6

In case any one else ever has this issue

It turns out my problem can be fixed by using a rectangle rather than a polygon when specifying the shape of the entity.
SingleTileImageryProvider also works, but has slightly different behavior (can’t be picked, etc.).