From 4a999e06a3bbf1ea10d295b7d719c71aef8e7d22 Mon Sep 17 00:00:00 2001 From: Andrew Calcutt Date: Mon, 29 Jan 2024 20:54:05 -0500 Subject: [PATCH] Fix 512px tiles so they work with maplibre-js raster 512 tilesize (#1152) * fix: try to add attribution to wmts Signed-off-by: Andrew Calcutt * fix: 512 tiles being wrong level for maplibre-js Signed-off-by: Andrew Calcutt * fix: revert wmts zoom level hack Signed-off-by: Andrew Calcutt * fix: test tileMargin Signed-off-by: Andrew Calcutt * fix: remove broken mercator_512 change Signed-off-by: Andrew Calcutt * fix: put back mercator Signed-off-by: Andrew Calcutt * Revert "fix: try to add attribution to wmts" This reverts commit b8d858f2c6d6354ea54a7fe18d08bb50d8f28219. * fix: put back if Signed-off-by: Andrew Calcutt * fix: semicolon Signed-off-by: Andrew Calcutt * fix: semicolon Signed-off-by: Andrew Calcutt * fix: lint Signed-off-by: Andrew Calcutt * fix: center without mercator_512 Signed-off-by: Andrew Calcutt * fix: put back const Signed-off-by: Andrew Calcutt * fix: lint Signed-off-by: Andrew Calcutt * fix: text Signed-off-by: Andrew Calcutt --------- Signed-off-by: Andrew Calcutt --- public/templates/viewer.tmpl | 1 + public/templates/wmts.tmpl | 38 ++++++++++++++++++------------------ src/serve_rendered.js | 31 +++++++++++++++++++---------- 3 files changed, 41 insertions(+), 29 deletions(-) diff --git a/public/templates/viewer.tmpl b/public/templates/viewer.tmpl index 66abc24..604b8b2 100644 --- a/public/templates/viewer.tmpl +++ b/public/templates/viewer.tmpl @@ -108,6 +108,7 @@ for (tile_url in tile_urls) { L.tileLayer(tile_urls[tile_url], { tileSize: 512, + zoomOffset: -1, minZoom: tile_minzoom, maxZoom: tile_maxzoom, attribution: tile_attribution diff --git a/public/templates/wmts.tmpl b/public/templates/wmts.tmpl index 4f4a3ce..59e2ed9 100644 --- a/public/templates/wmts.tmpl +++ b/public/templates/wmts.tmpl @@ -251,7 +251,7 @@ GoogleMapsCompatible_512 urn:ogc:def:crs:EPSG::3857 - 1 + 0 279541132.0143589 -20037508.34 20037508.34 512 @@ -260,7 +260,7 @@ 1 - 2 + 1 139770566.0071794 -20037508.34 20037508.34 512 @@ -269,7 +269,7 @@ 2 - 3 + 2 69885283.00358972 -20037508.34 20037508.34 512 @@ -278,7 +278,7 @@ 4 - 4 + 3 34942641.501795 -20037508.34 20037508.34 512 @@ -287,7 +287,7 @@ 8 - 5 + 4 17471320.750897 -20037508.34 20037508.34 512 @@ -296,7 +296,7 @@ 16 - 6 + 5 8735660.3754487 -20037508.34 20037508.34 512 @@ -305,7 +305,7 @@ 32 - 7 + 6 4367830.1877244 -20037508.34 20037508.34 512 @@ -314,7 +314,7 @@ 64 - 8 + 7 2183915.0938622 -20037508.34 20037508.34 512 @@ -323,7 +323,7 @@ 128 - 9 + 8 1091957.5469311 -20037508.34 20037508.34 512 @@ -332,7 +332,7 @@ 256 - 10 + 9 545978.77346554 -20037508.34 20037508.34 512 @@ -341,7 +341,7 @@ 512 - 11 + 10 272989.38673277 -20037508.34 20037508.34 512 @@ -350,7 +350,7 @@ 1024 - 12 + 11 136494.69336639 -20037508.34 20037508.34 512 @@ -359,7 +359,7 @@ 2048 - 13 + 12 68247.346683193 -20037508.34 20037508.34 512 @@ -368,7 +368,7 @@ 4096 - 14 + 13 34123.673341597 -20037508.34 20037508.34 512 @@ -377,7 +377,7 @@ 8192 - 15 + 14 17061.836670798 -20037508.34 20037508.34 512 @@ -386,7 +386,7 @@ 16384 - 16 + 15 8530.9183353991 -20037508.34 20037508.34 512 @@ -395,7 +395,7 @@ 32768 - 17 + 16 4265.4591676996 -20037508.34 20037508.34 512 @@ -404,7 +404,7 @@ 65536 - 18 + 17 2132.7295838498 -20037508.34 20037508.34 512 @@ -413,7 +413,7 @@ 131072 - 19 + 18 1066.364791924892 -20037508.34 20037508.34 512 diff --git a/src/serve_rendered.js b/src/serve_rendered.js index 0068ac0..82e9c59 100644 --- a/src/serve_rendered.js +++ b/src/serve_rendered.js @@ -413,7 +413,14 @@ const respondImage = ( pool = item.map.renderersStatic[scale]; } pool.acquire((err, renderer) => { - const mlglZ = Math.max(0, z - 1); + // For 512px tiles, use the actual maplibre-native zoom. For 256px tiles, use zoom - 1 + let mlglZ; + if (width === 512) { + mlglZ = Math.max(0, z); + } else { + mlglZ = Math.max(0, z - 1); + } + const params = { zoom: mlglZ, center: [lon, lat], @@ -423,12 +430,14 @@ const respondImage = ( height, }; - if (z === 0) { + // HACK(Part 1) 256px tiles are a zoom level lower than maplibre-native default tiles. this hack allows tileserver-gl to support zoom 0 256px tiles, which would actually be zoom -1 in maplibre-native. Since zoom -1 isn't supported, a double sized zoom 0 tile is requested and resized in Part 2. + if (z === 0 && width === 256) { params.width *= 2; params.height *= 2; } + // END HACK(Part 1) - if (z > 2 && tileMargin > 0) { + if (z > 0 && tileMargin > 0) { params.width += tileMargin * 2; params.height += tileMargin * 2; } @@ -449,9 +458,9 @@ const respondImage = ( }, }); - if (z > 2 && tileMargin > 0) { - const [_, y] = mercator.px(params.center, z); - let yoffset = Math.max( + if (z > 0 && tileMargin > 0) { + const y = mercator.px(params.center, z)[1]; + const yoffset = Math.max( Math.min(0, y - 128 - tileMargin), y + 128 + tileMargin - Math.pow(2, z + 8), ); @@ -463,10 +472,11 @@ const respondImage = ( }); } - if (z === 0) { - // HACK: when serving zoom 0, resize the 0 tile from 512 to 256 + // HACK(Part 2) 256px tiles are a zoom level lower than maplibre-native default tiles. this hack allows tileserver-gl to support zoom 0 256px tiles, which would actually be zoom -1 in maplibre-native. Since zoom -1 isn't supported, a double sized zoom 0 tile is requested and resized here. + if (z === 0 && width === 256) { image.resize(width * scale, height * scale); } + // END HACK(Part 2) const composites = []; if (overlay) { @@ -564,10 +574,11 @@ export const serve_rendered = { ) { return res.status(404).send('Out of bounds'); } + const tileCenter = mercator.ll( [ - ((x + 0.5) / (1 << z)) * (tileSize << z), - ((y + 0.5) / (1 << z)) * (tileSize << z), + ((x + 0.5) / (1 << z)) * (256 << z), + ((y + 0.5) / (1 << z)) * (256 << z), ], z, );