Layer not being displayed correctly when using WebMapTileServiceImageryProvider

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

When I use WebMapTileServiceImageryProvider to display a layer on my Cesium globe, the data is drawn in the correct spot on the Cesium globe - but only very briefly (less than a second). The layer then appears to be drawn over the Northern Pole/Greenland region where it then stays. The data is not being rendered in the correct spot and I wonder what I am doing wrong. Interestingly, the Cesium Sandcastle WebMapTileServiceImageryProvider example appears doing a very similar thing: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Web%20Map%20Tile%20Service%20with%20Time.html&label=Beginner
In the Cesium Sandcastle example, the layer data appears near the Northern Pole region and the Atlantic ocean. I'm getting similar results when using the UrlTemplateImageryProvider class as well.

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

    var viewer = new Cesium.Viewer('cesiumContainer');
    
    var provider = new Cesium.WebMapTileServiceImageryProvider({
        url : 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{TileMatrix}/{TileRow}/{TileCol}.png',
        credit : new Cesium.Credit('Iowa Environmental Mesonet of Iowa State University')
    });
    var layer = viewer.imageryLayers.addImageryProvider(provider);

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

We are looking to put layered data on a map in the most performant way possible. WebMapTileServiceImageryProvider seems to be faster than WebMapServiceImageryProvider. But when I use WebMapServiceImageryProvider the data does appear in the correct spot on the globe, and it stays there, unlike WebMapTileServiceImageryProvider.

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

Cesium 1.35, Google Chrome Version 59.0.3071.115 (Official Build) (32-bit)

Hi Margaret,

I believe that may be a bug, I opened an issue in the repo (https://github.com/AnalyticalGraphicsInc/cesium/issues/5713) to track it.

Thanks,

Gabby

Hi Gabby,

Thank you very much for looking into this issue.

Respectfully,

Margaret May

I’m reviving this thread because I’m experiencing the same problem with (I believe) the most recent version of Cesium. (via npm install cesium)

The following works perfectly. The tiles line up with their geographic coordinates.

new Cesium.UrlTemplateImageryProvider({
url : ‘https://d11vmysgektmfh.cloudfront.net/GOES16/ABI/FD/02/tiles/{Time}/{z}/{x}/{reverseY}.png’,
credit : ‘NOAA/NESDIS/STAR’,
tilingScheme : new Cesium.WebMercatorTilingScheme({
numberOfLevelZeroTilesX: 1,
numberOfLevelZeroTilesY: 1
}),
hasAlphaChannel : true,
minimumLevel : 0,
maximumLevel : 6,
customTags : {
Time: function(imageryProvider, x, y, level) {
return ‘2019-10-15T17:00:00Z’
}
}
})

However,

Using WebMapTileServiceImageryProvider results in something that only Picaso could enjoy.

new Cesium.WebMapTileServiceImageryProvider({
//url : ‘https://d11vmysgektmfh.cloudfront.net/GOES16/ABI/FD/02/{TileMatrixSet}/{Time}/{z}/{x}/{reverseY}.png’,
url : ‘https://d11vmysgektmfh.cloudfront.net/GOES16/ABI/FD/02/{TileMatrixSet}/{Time}/{TileMatrix}/{TileRow}/{TileCol}.png’,
layer : ‘’,
style : ‘’,
tileMatrixSetID : ‘tiles’,
format: ‘image/png’,
credit : ‘NOAA’,
//tilingScheme : new Cesium.WebMercatorTilingScheme({
//numberOfLevelZeroTilesX: 1,
//numberOfLevelZeroTilesY: 1
//}),
minimumLevel : 0,
maximumLevel : 6,
clock : clock,
times: times
})
);

clock and times are defined elsewhere in the , but they are ISO and the results are identical to the fixed time in the working example.

I don’t really care which ImageryProvider I use, provided it works. I do care that times are properly passed into the URL though. The first working example using fixed time is obviously not ideal since I want a “living” weather display. Is there something obvious in my code above or is this still a bug?

Thanks,

/.Matt

At first glance, it looks like the issue is that you need that reverseY tag you’re using in the UrlTemplateImageProvider.

Have you tried reading the current time (from viewer.clock.currentTime) in your customTags time function and returning the right interval there?

Hi Omar,

Thank you for the reply.

customTags : {
Time: function(imageryProvider, x, y, level) {
return viewer.clock.currentTime
}
}

I altered the code to use the above snippet and the imagery is now showing up as expected.

Thanks again for the assistance.