La Paz, Bolivia

Cesium WMS Custom Template

Written by R.D.M.

Typical WMS template

WMS services typically use the format /z/x/y (or /{znum}/{xnum}/{ynum}) to get map tiles. The WMS service I was trying to connect to was using /x_{xnum}/y_{ynum}/z_{znum}.

The z number is the zoom level and the x and y make up the axes of the grid of the globe. Similar to this:

Using WMS in Cesium.js

There is a neat class in Cesium called createTileMapServiceImageryProvider.js. This will allow you to easily connect to a WMS service and it does all the work for you. Problem is it assumes that your WMS service is using the standard format of /z/x/y. So I modified the class to take a tilesUrlTemplate in the options object which will enable you to pass whatever you want for the format.

So I basically just added this code to the class:

1 if (!options.tilesUrlTemplate)
2     options.tilesUrlTemplate = '{z}/{x}/{reverseY}.' + fileExtension;
3 var templateUrl = joinUrls(url, options.tilesUrlTemplate);

Then you can set the template url like so:

1 var viewer = new Cesium.Viewer('cesiumContainer');
2 var layers = viewer.imageryLayers;
3 var newLayer = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
4     url : 'http://wms.url/',
5     tilesUrlTemplate : "x_{x}/y_{y}/z_{z}"
6 }));

Tags you can use in template:

1 {
2 		'{x}': xTag,
3 		'{y}': yTag,
4 		'{z}': zTag,
5 		'{s}': sTag,
6 		'{reverseX}': reverseXTag,
7 		'{reverseY}': reverseYTag,
8 		'{reverseZ}': reverseZTag
9 }

The branch is on GitHub: link

Done At: Jun 4,2016