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 <acalcutt@techidiots.net>

* fix: 512 tiles being wrong level for maplibre-js

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: revert wmts zoom level hack

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: test tileMargin

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: remove broken mercator_512 change

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: put back mercator

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* Revert "fix: try to add attribution to wmts"

This reverts commit b8d858f2c6d6354ea54a7fe18d08bb50d8f28219.

* fix: put back if

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: semicolon

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: semicolon

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: center without mercator_512

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: put back const

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: text

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

---------

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>
This commit is contained in:
Andrew Calcutt 2024-01-29 20:54:05 -05:00 committed by GitHub
parent 41974cf613
commit 4a999e06a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 29 deletions

View File

@ -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

View File

@ -251,7 +251,7 @@
<ows:Identifier>GoogleMapsCompatible_512</ows:Identifier>
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
<TileMatrix>
<ows:Identifier>1</ows:Identifier>
<ows:Identifier>0</ows:Identifier>
<ScaleDenominator>279541132.0143589</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -260,7 +260,7 @@
<MatrixHeight>1</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>2</ows:Identifier>
<ows:Identifier>1</ows:Identifier>
<ScaleDenominator>139770566.0071794</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -269,7 +269,7 @@
<MatrixHeight>2</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>3</ows:Identifier>
<ows:Identifier>2</ows:Identifier>
<ScaleDenominator>69885283.00358972</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -278,7 +278,7 @@
<MatrixHeight>4</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>4</ows:Identifier>
<ows:Identifier>3</ows:Identifier>
<ScaleDenominator>34942641.501795</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -287,7 +287,7 @@
<MatrixHeight>8</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>5</ows:Identifier>
<ows:Identifier>4</ows:Identifier>
<ScaleDenominator>17471320.750897</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -296,7 +296,7 @@
<MatrixHeight>16</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>6</ows:Identifier>
<ows:Identifier>5</ows:Identifier>
<ScaleDenominator>8735660.3754487</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -305,7 +305,7 @@
<MatrixHeight>32</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>7</ows:Identifier>
<ows:Identifier>6</ows:Identifier>
<ScaleDenominator>4367830.1877244</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -314,7 +314,7 @@
<MatrixHeight>64</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>8</ows:Identifier>
<ows:Identifier>7</ows:Identifier>
<ScaleDenominator>2183915.0938622</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -323,7 +323,7 @@
<MatrixHeight>128</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>9</ows:Identifier>
<ows:Identifier>8</ows:Identifier>
<ScaleDenominator>1091957.5469311</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -332,7 +332,7 @@
<MatrixHeight>256</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>10</ows:Identifier>
<ows:Identifier>9</ows:Identifier>
<ScaleDenominator>545978.77346554</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -341,7 +341,7 @@
<MatrixHeight>512</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>11</ows:Identifier>
<ows:Identifier>10</ows:Identifier>
<ScaleDenominator>272989.38673277</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -350,7 +350,7 @@
<MatrixHeight>1024</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>12</ows:Identifier>
<ows:Identifier>11</ows:Identifier>
<ScaleDenominator>136494.69336639</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -359,7 +359,7 @@
<MatrixHeight>2048</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>13</ows:Identifier>
<ows:Identifier>12</ows:Identifier>
<ScaleDenominator>68247.346683193</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -368,7 +368,7 @@
<MatrixHeight>4096</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>14</ows:Identifier>
<ows:Identifier>13</ows:Identifier>
<ScaleDenominator>34123.673341597</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -377,7 +377,7 @@
<MatrixHeight>8192</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>15</ows:Identifier>
<ows:Identifier>14</ows:Identifier>
<ScaleDenominator>17061.836670798</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -386,7 +386,7 @@
<MatrixHeight>16384</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>16</ows:Identifier>
<ows:Identifier>15</ows:Identifier>
<ScaleDenominator>8530.9183353991</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -395,7 +395,7 @@
<MatrixHeight>32768</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>17</ows:Identifier>
<ows:Identifier>16</ows:Identifier>
<ScaleDenominator>4265.4591676996</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -404,7 +404,7 @@
<MatrixHeight>65536</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>18</ows:Identifier>
<ows:Identifier>17</ows:Identifier>
<ScaleDenominator>2132.7295838498</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>
@ -413,7 +413,7 @@
<MatrixHeight>131072</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>19</ows:Identifier>
<ows:Identifier>18</ows:Identifier>
<ScaleDenominator>1066.364791924892</ScaleDenominator>
<TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
<TileWidth>512</TileWidth>

View File

@ -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,
);