ImageStatic projection with EPSG:3857 show black screen

[robinZhao]

https://github.com/openlayers/ol-cesium/blob/master/examples/image-static.html

use imageStatic with EPSG:4326 display correctly
but with EPSG:3857 show black screen in cesium view;

code:

const ol2d = new olMap({
  layers: [
    new olLayerTile({
      source: new olSourceOSM()
    }),
    new ImageLayer({
      source: new Static({
        url: '/assets/5eca00dea6ce_CWDT006.png',
        crossOrigin: '',
        //projection: 'EPSG:4326',// display correctly 
        //imageExtent // display correctly 
        projection: 'EPSG:3857', //black screen
        imageExtent:proj.transformExtent(imageExtent,'EPSG:4326','EPSG:3857',100) //blackscreen
      })
    })
  ],
  controls: olControlDefaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  target: 'map',
  view: new olView({
    center: transform(getCenter(imageExtent), 'EPSG:4326', 'EPSG:3857'),
    zoom: 4,
    projection: 'EPSG:3857'
  })
});

const ol3d = new OLCesium({
  map: ol2d
});
const scene = ol3d.getCesiumScene();
Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp);
ol3d.setEnabled(true);

[robinZhao]

[robinZhao]

2.16.0 core.js line 289

•        const rectangle = Cesium.Rectangle.fromDegrees(source.getImageExtent()[0], source.getImageExtent()[1], source.getImageExtent()[2], source.getImageExtent()[3], new Cesium.Rectangle());
  

modify to

•        const rectangle = extentToRectangle(source.getImageExtent(),projection)
  

that display correctly

[gberaudo]

Hi @robinZhao, thanks for the report and sharing your solution.

If I understand correctly:

• you have an image which is positionned with some EPSG:4326 extent.
• when you provide the extent in EPSG:3857 it does not work so you reproject it in core.js.
  I think it is not correct: if the image is for EPSG:4326 you should use that projection.

Now, I agree that OL-Cesium should be able to position an EPSG:3857 static image.
For this, it should do the reprojection that you added to core.js and also I think it should pass a proper https://cesium.com/learn/cesiumjs/ref-doc/SingleTileImageryProvider.html#tilingScheme

Would be great to create and example for EPSG:3857.