How to set the tileMatrixLabels parameter in WebMapTileServiceImageryProvider?

CesiumJS
1

HI all,

I’ve used Geoserver to publish the WMTS service, and the WMTS XML structure from Geoserver is as follows. How should I set the tileMatrixLabels parameter in WebMapTileServiceImageryProvider function if the map tiles could be presented appropriately? Thanks a lot~

<Layer>
  <ows:Title>20141120</ows:Title>
  <ows:WGS84BoundingBox>
    <ows:LowerCorner>140.82859512546707 27.20071336835731</ows:LowerCorner>
    <ows:UpperCorner>140.9296232354283 27.291010822812957</ows:UpperCorner>
  </ows:WGS84BoundingBox>
  <ows:Identifier>LIDAR:20141120</ows:Identifier>
  <Style isDefault="true">
    <ows:Identifier/>
  </Style>
  <Format>image/png</Format>
  <Format>image/jpeg</Format>
  <InfoFormat>text/plain</InfoFormat>
  <InfoFormat>application/vnd.ogc.gml</InfoFormat>
  <InfoFormat>text/xml</InfoFormat>
  <InfoFormat>application/vnd.ogc.gml/3.1.1</InfoFormat>
  <InfoFormat>text/xml</InfoFormat>
  <InfoFormat>text/html</InfoFormat>
  <InfoFormat>application/json</InfoFormat>
  <TileMatrixSetLink>
    <TileMatrixSet>EPSG:4326</TileMatrixSet>
    <TileMatrixSetLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:4326:0</TileMatrix>
        <MinTileRow>0</MinTileRow>
        <MaxTileRow>0</MaxTileRow>
        <MinTileCol>1</MinTileCol>
        <MaxTileCol>1</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:4326:1</TileMatrix>
        <MinTileRow>0</MinTileRow>
        <MaxTileRow>0</MaxTileRow>
        <MinTileCol>3</MinTileCol>
        <MaxTileCol>3</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:4326:2</TileMatrix>
        <MinTileRow>1</MinTileRow>
        <MaxTileRow>1</MaxTileRow>
        <MinTileCol>7</MinTileCol>
        <MaxTileCol>7</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:4326:3</TileMatrix>
        <MinTileRow>2</MinTileRow>
        <MaxTileRow>2</MaxTileRow>
        <MinTileCol>14</MinTileCol>
        <MaxTileCol>14</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:4326:4</TileMatrix>
        <MinTileRow>5</MinTileRow>
        <MaxTileRow>5</MaxTileRow>
        <MinTileCol>28</MinTileCol>
        <MaxTileCol>28</MaxTileCol>
      </TileMatrixLimits>
      .......
    </TileMatrixSetLimits>
  </TileMatrixSetLink>
  <TileMatrixSetLink>
    <TileMatrixSet>EPSG:900913</TileMatrixSet>
    <TileMatrixSetLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:900913:0</TileMatrix>
        <MinTileRow>0</MinTileRow>
        <MaxTileRow>0</MaxTileRow>
        <MinTileCol>0</MinTileCol>
        <MaxTileCol>0</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:900913:1</TileMatrix>
        <MinTileRow>0</MinTileRow>
        <MaxTileRow>0</MaxTileRow>
        <MinTileCol>1</MinTileCol>
        <MaxTileCol>1</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:900913:2</TileMatrix>
        <MinTileRow>1</MinTileRow>
        <MaxTileRow>1</MaxTileRow>
        <MinTileCol>3</MinTileCol>
        <MaxTileCol>3</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:900913:3</TileMatrix>
        <MinTileRow>3</MinTileRow>
        <MaxTileRow>3</MaxTileRow>
        <MinTileCol>7</MinTileCol>
        <MaxTileCol>7</MaxTileCol>
      </TileMatrixLimits>
      <TileMatrixLimits>
        <TileMatrix>EPSG:900913:4</TileMatrix>
        <MinTileRow>6</MinTileRow>
        <MaxTileRow>6</MaxTileRow>
        <MinTileCol>14</MinTileCol>
        <MaxTileCol>14</MaxTileCol>
      </TileMatrixLimits>
2

Here’s one way:

var tileMatrixSetLabels = [

‘EPSG:4326:0’,

‘EPSG:4326:1’,

‘EPSG:4326:2’,

‘EPSG:4326:3’,

‘EPSG:4326:4’,

‘EPSG:4326:5’,

‘EPSG:4326:6’,

‘EPSG:4326:7’,

‘EPSG:4326:8’,

‘EPSG:4326:9’,

‘EPSG:4326:10’,

‘EPSG:4326:11’,

‘EPSG:4326:12’,

‘EPSG:4326:13’,

‘EPSG:4326:14’,

‘EPSG:4326:15’,

‘EPSG:4326:16’,

‘EPSG:4326:17’,

‘EPSG:4326:18’,

‘EPSG:4326:19’,

‘EPSG:4326:20’,

‘EPSG:4326:21’

]

var layer = new Cesium.WebMapTileServiceImageryProvider({

url : 'https://c0007409-00.stk.com/geoserver/gwc/service/wmts?’,

layer : ‘topp:tasmania_state_boundaries’,

style : ‘default’,

format : ‘image/png’,

tileMatrixSetID : ‘EPSG:4326’,

tileMatrixLabels: tileMatrixSetLabels,

maximumLevel: 22,

credit : new Cesium.Credit(‘CIA World Data Bank II’)

});

viewer.imageryLayers.addImageryProvider(layer);

``

3

Hi,

Thanks for your help~

But the WMTS layer seems in the wrong place and looks strange in Cesium.

The following is the sample code in Sandcastle and the attached file is the result:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var tileMatrixSetLabels = [

‘EPSG:4326:0’,

‘EPSG:4326:1’,

‘EPSG:4326:2’,

‘EPSG:4326:3’,

‘EPSG:4326:4’,

‘EPSG:4326:5’,

‘EPSG:4326:6’,

‘EPSG:4326:7’,

‘EPSG:4326:8’,

‘EPSG:4326:9’,

‘EPSG:4326:10’,

‘EPSG:4326:11’,

‘EPSG:4326:12’,

‘EPSG:4326:13’,

‘EPSG:4326:14’,

‘EPSG:4326:15’,

‘EPSG:4326:16’,

‘EPSG:4326:17’,

‘EPSG:4326:18’,

‘EPSG:4326:19’,

‘EPSG:4326:20’,

‘EPSG:4326:21’

];

var layer = new Cesium.WebMapTileServiceImageryProvider({

url : ‘http://demo.opengeo.org/geoserver/gwc/service/wmts’,

layer : ‘ne:ne’,

style : ‘default’,

format : ‘image/png’,

tileMatrixSetID : ‘EPSG:4326’,

tileMatrixLabels: tileMatrixSetLabels,

maximumLevel: 22

});

viewer.imageryLayers.addImageryProvider(layer);

Ming-Che Liu於 2016年7月29日星期五 UTC+8下午4時07分57秒寫道：

Geoserver WMTS.jpg
Geoserver WMTS.jpg1920×980 401 KB

4

You also need to set the tilingScheme to GeographicTilingScheme since the default for WebMapTileServiceImageryProvider is WebMercatorTilingScheme.

5

Hi,

Appreciate your help and the world map could be displayed appropriately.

But I still can’t present the local map in Cesium. Could you instruct me again?

The sample code is as follows:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var tileMatrixSetLabels = [
‘EPSG:4326:0’,
‘EPSG:4326:1’,
‘EPSG:4326:2’,
‘EPSG:4326:3’,
‘EPSG:4326:4’,
‘EPSG:4326:5’,
‘EPSG:4326:6’,
‘EPSG:4326:7’,
‘EPSG:4326:8’,
‘EPSG:4326:9’,
‘EPSG:4326:10’,
‘EPSG:4326:11’,
‘EPSG:4326:12’,
‘EPSG:4326:13’,
‘EPSG:4326:14’,
‘EPSG:4326:15’,
‘EPSG:4326:16’,
‘EPSG:4326:17’,
‘EPSG:4326:18’,
‘EPSG:4326:19’,
‘EPSG:4326:20’,
‘EPSG:4326:21’
];

var layer = new Cesium.WebMapTileServiceImageryProvider({
url : ‘http://demo.opengeo.org/geoserver/gwc/service/wmts’,
layer : ‘maps:parks’,
style : ‘default’,
format : ‘image/png’,
tileMatrixSetID : ‘EPSG:4326’,
tileMatrixLabels: tileMatrixSetLabels,
tilingScheme: new Cesium.GeographicTilingScheme(),
rectangle: new Cesium.Rectangle.fromDegrees(-135.11385016961316, 41.90665797346074, -52.688540508077914, 62.466522471253434)

});

viewer.imageryLayers.addImageryProvider(layer);

Scott Reynolds於 2016年8月2日星期二 UTC+8下午7時31分02秒寫道：

6

Hi,

I can successfully get the tiles from Geoserver WMTS protocol which is just set the style to ‘’

Here is the sample code:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var tileMatrixSetLabels = [
‘EPSG:4326:0’,
‘EPSG:4326:1’,
‘EPSG:4326:2’,
‘EPSG:4326:3’,
‘EPSG:4326:4’,
‘EPSG:4326:5’,
‘EPSG:4326:6’,
‘EPSG:4326:7’,
‘EPSG:4326:8’,
‘EPSG:4326:9’,
‘EPSG:4326:10’,
‘EPSG:4326:11’,
‘EPSG:4326:12’,
‘EPSG:4326:13’,
‘EPSG:4326:14’,
‘EPSG:4326:15’,
‘EPSG:4326:16’,
‘EPSG:4326:17’,
‘EPSG:4326:18’,
‘EPSG:4326:19’,
‘EPSG:4326:20’,
‘EPSG:4326:21’
];

var layer = new Cesium.WebMapTileServiceImageryProvider({
url : ‘http://demo.opengeo.org/geoserver/gwc/service/wmts’,
layer : ‘maps:parks’,
style : ‘’,
format : ‘image/png’,
tileMatrixSetID : ‘EPSG:4326’,
tileMatrixLabels: tileMatrixSetLabels,
tilingScheme: new Cesium.GeographicTilingScheme(),
rectangle: new Cesium.Rectangle.fromDegrees(-135.11385016961316, 41.90665797346074, -52.688540508077914, 62.466522471253434)

});

viewer.imageryLayers.addImageryProvider(layer);

7

@Scott Reynolds
It was realy helpful for me. Thanks!