Load image before show by imageMaterialProperty

CesiumJS
1

I want to do something similar to smapshot
https://cesium.com/blog/2017/04/21/smapshot/

I am trying to show images in the polygon entity.
The image is quite havey.

example code:

var e = viewer.entities.add({

polygon: {

hierarchy : {

positions : [#POSITIONS]

},

material : new Cesium.ImageMaterialProperty({

image: ‘#IMAGE_URL’,

color: Cesium.Color.WHITE.withAlpha(1.0),

transparent: true,

}),

classificationType : Cesium.ClassificationType.TERRAIN,

stRotation : Cesium.Math.toRadians(45)

}

});

How can I load the image before showing it on the polygon?

2

Notice that the image parameter can be a URL, which CesiumJS will then load, or an Image element:

https://cesium.com/docs/cesiumjs-ref-doc/ImageMaterialProperty.html?classFilter=ImageMaterialProperty

So you could fetch the image with the Resource class:

https://cesium.com/docs/cesiumjs-ref-doc/Resource.html?classFilter=Resou#.fetchImage

Wait for the promise to resolve, get the Image element, and pass that to the entity. Let me know if that works.

3

Works very well, thank you!
There is an option to show a tiled image (IIP) by image material?

‫בתאריך יום א׳, 8 בדצמ׳ 2019 ב-17:10 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬

4

Can you elaborate a bit on what you mean by a tiled image?

5

for very large pixels images there is a service that allows you to show an image like a pyramid of tiles

the backend engine knows were the image stored and makes on her preprocess of tiling and serves you just your relevant tiles.

there is an example from there website:
http://merovingio.c2rmf.cnrs.fr/iipimage/iipmooviewer/louvre.html
you can see in the network on dev tools the actual requests for tiles that you get from this service.

there is an example of openlayers for serving IIP / zoomify
https://openlayers.org/en/v5.3.0/examples/zoomify.html

I would like to show an IIP image on the map, there is an option to do it?

‫בתאריך יום ג׳, 10 בדצמ׳ 2019 ב-14:53 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬

6

Thanks for the explanation and links! CesiumJS doesn’t support IIP images - but you could either implement that by having the client read each tile and create a separate polygon in the right place, or by using one of the currently supported imagery tile formats, such as TMS or WMTS:

https://cesium.com/docs/cesiumjs-ref-doc/ImageryProvider.html?classFilter=ImageryProvider

Also see:

https://cesium.com/docs/tutorials/imagery-layers/

7

Thanks for the response.
TMS / WMTS could be excellent if I could add to them hight to the rectangle from the ground.

(using three
dimensional region insted of two dimensional region).

There is an option to use this ability with defining height from the ground?

‫בתאריך יום ה׳, 12 בדצמ׳ 2019 ב-22:08 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬