Trying to use Tileserver-gl as an Image Provider.

CesiumJS
1

I have setup Tileserver-gl server to service my map images. The problem I'm having is that whenever I try to load the images into cesium through the server nothing happens and it isn't tell me whats not working. I have a tried 2 different methods of bring in the images were UrlTemplateImageryProvider and WebMapTileServiceImageryProvider. So can I use Tileserver-gl as a Image Provider or is it not supported?

I'm using this system so I can use vector maps in Cesium and use Maputnik an opensource version of MapBox.

Code:

var temp3 = new Cesium.UrlTemplateImageryProvider({
  url : 'http://172.20.2.202:8080/styles/dark-matter-cpb-fixed-clipped-states/{z}/{x}/{y}.png'});

var temp1 = Cesium.WebMapTileServiceImageryProvider({
         url : ‘http://wmts.maptiler.com/aHR0cDovLzE3Mi4yMC4yLjIwMjo4MDgwL3N0eWxlcy9kYXJrLW1hdHRlci1jcGIuanNvbg/wmts’,
        layer : ‘172202202:8080’,
        style : ‘default’,
        format : ‘image/png’,
        tileMatrixSetID : ‘GoogleMapsCompatible’,
        maximumLevel: 19
    });

Browser: Chrome

Other:

Tileserver-gl is running on ubuntu in docker. Formats it services are GL Style, TileJson, WMTS, and XYZ.

https://github.com/klokantech/tileserver-gl

Thanks you,
Andrew

2

I have also a GL Tileserver as docker.

This works for me

var bla = layers.addImageryProvider(Cesium.createOpenStreetMapImageryProvider({
url: ‘http://www.bla.ai:8081/styles/dark-matter’,
crossOrigin: null,
credit: ‘Map Data by OpenStreetMap, under ODbL,’
}));

and obviously check your CORS

3

this.viewer = new Cesium.Viewer(this.el.nativeElement, {
terrainProvider: Cesium.createWorldTerrain(),
});

var layers = this.viewer.scene.imageryLayers;