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:
globegrid

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
2
3
if (!options.tilesUrlTemplate)
    options.tilesUrlTemplate = '{z}/{x}/{reverseY}.' + fileExtension;
var templateUrl = joinUrls(url, options.tilesUrlTemplate);


Then you can set the template url like so:


1
2
3
4
5
6
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:

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

The branch is on GitHub: link

Done At: Jun 4,2016
Categories: