Cesium WMS Custom Template

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.

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:

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

Then you can set the template url like so:

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

Tags you can use in template:

{
  '{x}': xTag,
  '{y}': yTag,
  '{z}': zTag,
  '{s}': sTag,
  '{reverseX}': reverseXTag,
  '{reverseY}': reverseYTag,
  '{reverseZ}': reverseZTag
}

The branch is on GitHub.