Breaking tiles on ElevationLayer

[vladimir-rybalko]

Your Environment

• Version used: 2.38.2
• Browser Name and version: Chrome (106.0.5249.103)
• Operating System and version (desktop or mobile): Windows
• Link to your project: https://mmypnp.csb.app/

Context

I have 2 layers: ColorLayer - OSM and ElevationLayer - my raster layer. When I try to combine them, I get a break in the tiles.

Code available here

ElevationLayer is defined like this

const extent = new itowns.Extent('EPSG:4326', 29.0, 30, 60.0, 61);

const elevationSource = new itowns.WMSSource({
        extent,
        version: '1.3.0',
        name: 'GroundSpace:vuoksa_bridge',
        crs: 'EPSG:4326',
        format: 'image/png',
        url: './geoserver/GroundSpace/wms',
});

var elevationLayer = new itowns.ElevationLayer('wms_elevation', {
        source: elevationSource,
        useColorTextureElevation: true,
        colorTextureElevationMinZ: -15.55,
        colorTextureElevationMaxZ: 15.768,
});

view.addLayer(elevationLayer).then(
    debugMenu.addLayerGUI.bind(debugMenu)
);

How can I solve the broken tiles problem?

[vladimir-rybalko]

I found a solution to my problem by changing the FOV setting for the camera. To what extent is this decision correct?

  let k = 1;
  const width = window.innerWidth;
  const height = window.innerHeight;
  if (width > height) {
      k = width/height - 1;
  } else {
      k = height/width - 1;
  }
  k = k < 0.1 ? 0.15 : k;            
  view.camera.camera3D.fov += view.camera.camera3D.fov*k;
  view.camera.camera3D.updateProjectionMatrix();