Using Web Map Tile Service Imagery Provider is generating 400 error

CesiumJS
1

I am trying to use WebMapTileServiceImageryProvider to add a layer to cesium scene but i am getting 400 error in the network tab. And got this error in the console: Access to image at ‘http://localhost:8080/geoserver/gwc/service/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix=EPSG%3A900913%3A11&layer=shape%3ACURVADOS_TGI_Piloto_3116&style=line&tilerow=992&tilecol=596&tilematrixset=EPSG%3A900913&format=image%2Fpng’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. I got the same error when i was designing an open layers map and the problem was the way the tiles were request and not the cors in the geoserver. When I clicked the url of the requested tiles i got this.

Column 594 is out of range, min: 596 max:596

So, i think that the problem might be on how i am setting up the request of the wmts. This is my code.

const cesiumViewer = new cesium.Viewer(“cesiumContainer”, {
useDefaultRenderLoop: false,
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
imageryProvider: cesium.createOpenStreetMapImageryProvider({
url: “https://a.tile.openstreetmap.org/”,
}),
terrainShadows: cesium.ShadowMode.DISABLED,
terrainProvider: new cesium.CesiumTerrainProvider({
url: https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=nmq4UnqW2QV6ZX8sB80r,
requestWaterMask: true,
requestVertexNormals: true,
}),
});
const wmtsLayer = new cesium.WebMapTileServiceImageryProvider({
url: ‘http://localhost:8080/geoserver/gwc/service/wmts’,
layer: ‘shape:CURVADOS_TGI_Piloto_3116’,
style: ‘line’,
format: ‘image/png’,
tileMatrixSetID: ‘EPSG:900913’,
tileMatrixLabels: [
‘EPSG:900913:0’, ‘EPSG:900913:1’, ‘EPSG:900913:2’, ‘EPSG:900913:3’,
‘EPSG:900913:4’, ‘EPSG:900913:5’, ‘EPSG:900913:6’, ‘EPSG:900913:7’,
‘EPSG:900913:8’, ‘EPSG:900913:9’, ‘EPSG:900913:10’, ‘EPSG:900913:11’,
‘EPSG:900913:12’, ‘EPSG:900913:13’, ‘EPSG:900913:14’, ‘EPSG:900913:15’,
‘EPSG:900913:16’, ‘EPSG:900913:17’, ‘EPSG:900913:18’, ‘EPSG:900913:19’
],
minimumLevel: 0,
maximumLevel: 19,
tilingScheme: new cesium.WebMercatorTilingScheme(),
credit: new cesium.Credit(‘GeoServer WMTS’)
});
cesiumViewer.imageryLayers.addImageryProvider(wmtsLayer);
let cp = new cesium.Cartesian3(
4303414.154026048,
552161.235598733,
4660771.704035539
);

2

Hi there,

The CORS error you’re seeing is likely duw to the configuration on your geoserver. See this explanation about CORS for why it’s happening. I’m not an expert in geoserver, but there are likely tutorials which will explain how to configure to avoid this issue.

3

Thanks, I could solved the CORS problem but now the problem is in how I set up cesium to make the requests to my server.I am getting some of the tile of the image but for most of them i got an error 400(Bad request) like this

Exception exceptionCode=“TileOutOfRange” locator=“TILECOLUMN”

Column 2384 is out of range, min: 2385 max:2387

Also my geoserver has this configuration

<ows:Operation name=“GetCapabilities”>

ows:DCP

ows:HTTP

<ows:Get xlink:href=“http://localhost:8080/geoserver/gwc/service/wmts?”>

<ows:Constraint name=“GetEncoding”>

ows:AllowedValues

ows:ValueKVP</ows:Value>

</ows:AllowedValues>

</ows:Constraint>

</ows:Get>

</ows:HTTP>

</ows:DCP>

</ows:Operation>

<ows:Operation name=“GetTile”>

ows:DCP

ows:HTTP

<ows:Get xlink:href=“http://localhost:8080/geoserver/gwc/service/wmts?”>

<ows:Constraint name=“GetEncoding”>

ows:AllowedValues

ows:ValueKVP</ows:Value>

</ows:AllowedValues>

</ows:Constraint>

</ows:Get>

</ows:HTTP>

</ows:DCP>

</ows:Operation>

<ows:Operation name=“GetFeatureInfo”>

ows:DCP

ows:HTTP

<ows:Get xlink:href=“http://localhost:8080/geoserver/gwc/service/wmts?”>

<ows:Constraint name=“GetEncoding”>

ows:AllowedValues

ows:ValueKVP</ows:Value>

</ows:AllowedValues>

</ows:Constraint>

</ows:Get>

</ows:HTTP>

</ows:DCP>

</ows:Operation>

</ows:OperationsMetadata>
and this is the resourceURL
ResourceURL format=“image/png” resourceType=“tile” template=“http://localhost:8080/geoserver/gwc/service/wmts/rest/shape:CURVADOS_TGI_Piloto_3116/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png”/

ResourceURL format=“image/jpeg” resourceType=“tile” template=“http://localhost:8080/geoserver/gwc/service/wmts/rest/shape:CURVADOS_TGI_Piloto_3116/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg”

ResourceURL format=“text/plain” resourceType=“FeatureInfo” template=“http://localhost:8080/geoserver/gwc/service/wmts/rest/shape:CURVADOS_TGI_Piloto_3116/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}/{J}/{I}?format=text/plain”