Hello,
I want to show a raster data which is in lambert 93 projection(well im checking if i can show lambert projected raster data in cesium). For this purpose, I decided to write a tiling scheme and Cesium.WebMapServiceImageryProvider. I was able to show it in cesium world however, it has some gaps between adjacent tiles. Globe is in default geographic projection and i think tiles are not preserved when we go from geographic to lambert and from lambert to geographic. What can i do to handle it (given that im not going to reproject data to EPSG:4326 from geoserver etc…)? Should i consider shader solutions for this problem? I think my tiling logic is also not right probably:
Here is my tiling scheme
function Lambert93TilingScheme() {
this.ellipsoid = Cesium.Ellipsoid.WGS84;
this.numberOfLevelZeroTilesX = 2;
this.numberOfLevelZeroTilesY = 1;
this.rectangle = Cesium.Rectangle.fromDegrees(-9.86, 41.15, 10.38, 51.56); // Extent of EPSG:2154 in WGS84
this.projection = new Lambert93Projection();
}
Lambert93TilingScheme.prototype.getNumberOfXTilesAtLevel = function (level) {
return this.numberOfLevelZeroTilesX * (1 << level);
};
Lambert93TilingScheme.prototype.getNumberOfYTilesAtLevel = function (level) {
return this.numberOfLevelZeroTilesY * (1 << level);
};
Lambert93TilingScheme.prototype.tileXYToRectangle = function (x, y, level, result) {
const nativeRectangle = this.tileXYToNativeRectangle(x, y, level, result);
const sw = this.projection.unproject(new Cesium.Cartesian3(nativeRectangle.west, nativeRectangle.south, 0));
const ne = this.projection.unproject(new Cesium.Cartesian3(nativeRectangle.east, nativeRectangle.north, 0));
//
if (!Cesium.defined(result)) {
return new Cesium.Rectangle(
sw.longitude, sw.latitude,
ne.longitude, ne.latitude
);
}
//
result.west = sw.longitude;
result.south = sw.latitude;
result.east = ne.longitude;
result.north = ne.latitude;
return result;
};
Lambert93TilingScheme.prototype.tileXYToNativeRectangle = function (x, y, level, result) {
const southWestCoordinate = this.projection.project(Cesium.Rectangle.southwest(this.rectangle));
const northEastCoordinate = this.projection.project(Cesium.Rectangle.northeast(this.rectangle));
var minX = southWestCoordinate.x;
var minY = southWestCoordinate.y;
var maxX = northEastCoordinate.x;
var maxY = northEastCoordinate.y;
var xTiles = this.getNumberOfXTilesAtLevel(level);
var yTiles = this.getNumberOfYTilesAtLevel(level);
var tileWidth = (maxX - minX) / xTiles;
var tileHeight = (maxY - minY) / yTiles;
var west = minX + x * tileWidth;
var east = minX + (x + 1) * tileWidth;
var north = maxY - y * tileHeight;
var south = maxY - (y + 1) * tileHeight;
if (east > maxX) {
east = maxX;
}
if (north > maxY) {
north = maxY;
}
if (!Cesium.defined(result)) {
return new Cesium.Rectangle(west, south, east, north);
}
result.west = west;
result.south = south;
result.east = east;
result.north = north;
return result;
};
Lambert93TilingScheme.prototype.positionToTileXY = function (position, level, result) {
var lambertCoord = this.projection.project(position);
const southWestCoordinate = this.projection.project(Cesium.Rectangle.southwest(this.rectangle));
const northEastCoordinate = this.projection.project(Cesium.Rectangle.northeast(this.rectangle));
var minX = southWestCoordinate.x;
var minY = southWestCoordinate.y;
var maxX = northEastCoordinate.x;
var maxY = northEastCoordinate.y;
var xTiles = this.getNumberOfXTilesAtLevel(level);
var yTiles = this.getNumberOfYTilesAtLevel(level);
var tileWidth = (maxX - minX) / xTiles;
var tileHeight = (maxY - minY) / yTiles;
var xTile = Math.floor((lambertCoord.x - minX) / tileWidth);
var yTile = Math.floor((maxY - lambertCoord.y) / tileHeight);
xTile = Math.max(0, Math.min(xTiles - 1, xTile));
yTile = Math.max(0, Math.min(yTiles - 1, yTile));
if (!Cesium.defined(result)) {
return new Cesium.Cartesian2(xTile, yTile);
}
result.x = xTile;
result.y = yTile;
return result;
};
Here is my web map provider:
var imageryProvider = new Cesium.WebMapServiceImageryProvider({
url: '',
layers: '',
parameters: {
service: 'WMS',
version: '1.1.1',
request: 'GetMap',
styles: '',
format: 'image/png',
transparent: true,
width: 256,
height: 256,
},
tileWidth: 256,
tileHeight: 256,
tilingScheme: new Lambert93TilingScheme(),
rectangle: Cesium.Rectangle.fromDegrees(-9.86, 41.15, 10.38, 51.56),
srs: "EPSG:2154"
});
Here is the result:
