Using ol-tilecache with EPSG:4326 Tiles

[sonalanshika]

The library is really helpful.
I have used custom tilegrids also. It is displaying the map but not the correct tiles. In Zoom 0 it shows only partial map and the tiles seems to be distorted. I am using OL5.
The code snippet is below, Please suggest resolution-
var projection = ol.proj.get('EPSG:4326');
var map_extent=projection.getExtent();
var origin = ol.extent.getTopLeft(projection.getExtent());
var resolution_map= [0.703125, 0.3515625, 0.17578125, 0.087890625,
0.0439453125, 0.02197265625, 0.010986328125,
0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125,
0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625,0.000010728836059570,0.000005364418029785];
var tileGrid = new ol.tilegrid.TileGrid({ resolutions: resolution_map,
tileSize: 256,
origin: origin });
var maplayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileUrlFunction: createTileUrlFunction('https://URL_To_Tilecache/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.jpeg',tileGrid,map_extent)
})
});

[ghettovoice]

Hi @sonalanshika,
from snapshots that you send me I see that something wrong with raster reprojection.
Try to set 'EPSG:4326' projection to the XYZ source or map view.

const map = new ol.Map({
  ...
  view: new ol.View({
    projection: 'EPSG:4326',
  })
})

// and for the tile source cause by default it use EPSG:3857
var maplayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    projection: 'EPSG:4326',
    tileUrlFunction: createTileUrlFunction('https://URL_To_Tilecache/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.jpeg',tileGrid,map_extent)
  })
});

[sonalanshika]

Hi,

Thank you. however it solved the problem only partially. It is not showing the complete extent still. My code-snippet is below. Please suggest further.

var projection = ol.proj.get('EPSG:4326');

var map_extent=projection.getExtent();;
var origin = ol.extent.getTopLeft(projection.getExtent());

var maplayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileUrlFunction: createTileUrlFunction('https://URL_To_Tilecache/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.jpeg',tileGrid,map_extent),
projection: projection
})
});

var mapview = new ol.View({
center: [78.0000 , 21.0000 ],
projection: 'EPSG:4326',
resolutions: resolution_map,
zoom: 0,
minZoom: 0,
maxZoom: 17
});

map = new ol.Map({
target: 'map',
projection: 'EPSG:4326',
layers: [maplayer ],
view: mapview
});

[ghettovoice]

Hmm, still looks like a problem with view configuration or resolutions.

Try initialize view like below

var mapview = new ol.View({
  center: [78.0000 , 21.0000 ],
  projection: 'EPSG:4326', 
  zoom: 0,
  maxZoom: 17,
});

And tile grid

var tileGrid = ol.tilegrid.createXYZ({
  extent: ol.proj.get('EPSG:4326').getExtent(),
  maxZoom: 17,
  tileSize: [256, 256],
});

And also try to create source with you custom grid

const source = new ol.source.XYZ({
  tileUrlFunction: createTileUrlFunction('https://URL_To_Tilecache/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.jpeg',tileGrid,map_extent),
  projection: projection, 
  tileGrid: tileGrid,
})

Are you tiles data public? So I can play around this options too

[sonalanshika]

Hi,
thanks It works now. By adding tileGrid: tileGrid to the ol.source.XYZ. while tilegrid is kept "ol.tilegrid.TileGrid...." only.

Thank Again.

Regards,
Sonal