feat: get maplibre-native to render a png tile
Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>
This commit is contained in:
Andrew Calcutt
parent
b2733e2107
commit
85290024a9
1 changed files with 94 additions and 41 deletions
|
|
@ -6,8 +6,8 @@ import path from 'path';
|
|||
import url from 'url';
|
||||
import util from 'util';
|
||||
import zlib from 'zlib';
|
||||
import sharp from 'sharp'; // sharp has to be required before node-canvas. see https://github.com/lovell/sharp/issues/371
|
||||
import { createCanvas, Image } from 'canvas';
|
||||
import sharp from 'sharp'; // sharp has to be required before node-canvas. see https://github.com/lovell/sharp/issues/371
|
||||
import clone from 'clone';
|
||||
import Color from 'color';
|
||||
import express from 'express';
|
||||
|
|
@ -19,7 +19,7 @@ import polyline from '@mapbox/polyline';
|
|||
import proj4 from 'proj4';
|
||||
import request from 'request';
|
||||
import { getFontsPbf, getTileUrls, fixTileJSONCenter } from './utils.js';
|
||||
import { GetPMtilesInfo } from './pmtiles_adapter.js';
|
||||
import { GetPMtilesInfo, GetPMtilesTile } from './pmtiles_adapter.js';
|
||||
|
||||
const FLOAT_PATTERN = '[+-]?(?:\\d+|\\d+.?\\d+)';
|
||||
const PATH_PATTERN =
|
||||
|
|
@ -1219,9 +1219,9 @@ export const serve_rendered = {
|
|||
const renderer = new mlgl.Map({
|
||||
mode: mode,
|
||||
ratio: ratio,
|
||||
request: (req, callback) => {
|
||||
request: async (req, callback) => {
|
||||
const protocol = req.url.split(':')[0];
|
||||
// console.log('Handling request:', req);
|
||||
console.log('Handling request:', req);
|
||||
if (protocol === 'sprites') {
|
||||
const dir = options.paths[protocol];
|
||||
const file = unescape(req.url).substring(protocol.length + 3);
|
||||
|
|
@ -1251,55 +1251,107 @@ export const serve_rendered = {
|
|||
const sourceId = parts[2];
|
||||
const source = map.sources[sourceId];
|
||||
const sourceInfo = styleJSON.sources[sourceId];
|
||||
var typeofv = typeof map.sources[sourceId]
|
||||
|
||||
const z = parts[3] | 0;
|
||||
const x = parts[4] | 0;
|
||||
const y = parts[5].split('.')[0] | 0;
|
||||
const format = parts[5].split('.')[1];
|
||||
source.getTile(z, x, y, (err, data, headers) => {
|
||||
if (err) {
|
||||
|
||||
if (typeof map.sources[sourceId] === 'string' && map.sources[sourceId].split('.').pop().toLowerCase() === 'pmtiles') {
|
||||
let tileinfo = await GetPMtilesTile(map.sources[sourceId], z, x, y);
|
||||
let data = tileinfo.data;
|
||||
let headers = tileinfo.header;
|
||||
if (data == undefined) {
|
||||
if (options.verbose)
|
||||
console.log('MBTiles error, serving empty', err);
|
||||
console.log('MBTiles error, serving empty', err);
|
||||
createEmptyResponse(
|
||||
sourceInfo.format,
|
||||
sourceInfo.color,
|
||||
callback,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = {};
|
||||
if (headers['Last-Modified']) {
|
||||
response.modified = new Date(headers['Last-Modified']);
|
||||
}
|
||||
|
||||
if (format === 'pbf') {
|
||||
try {
|
||||
response.data = zlib.unzipSync(data);
|
||||
} catch (err) {
|
||||
console.log(
|
||||
'Skipping incorrect header for tile mbtiles://%s/%s/%s/%s.pbf',
|
||||
id,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
if (options.dataDecoratorFunc) {
|
||||
response.data = options.dataDecoratorFunc(
|
||||
sourceId,
|
||||
'data',
|
||||
response.data,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
response.data = data;
|
||||
}
|
||||
const response = {};
|
||||
if (headers['Last-Modified']) {
|
||||
response.modified = new Date(headers['Last-Modified']);
|
||||
}
|
||||
|
||||
callback(null, response);
|
||||
});
|
||||
if (format === 'pbf') {
|
||||
try {
|
||||
response.data = zlib.unzipSync(data);
|
||||
} catch (err) {
|
||||
console.log(
|
||||
'Skipping incorrect header for tile mbtiles://%s/%s/%s/%s.pbf',
|
||||
id,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
if (options.dataDecoratorFunc) {
|
||||
response.data = options.dataDecoratorFunc(
|
||||
sourceId,
|
||||
'data',
|
||||
response.data,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
response.data = data;
|
||||
}
|
||||
|
||||
callback(null, response);
|
||||
}
|
||||
} else {
|
||||
source.getTile(z, x, y, (err, data, headers) => {
|
||||
if (err) {
|
||||
if (options.verbose)
|
||||
console.log('MBTiles error, serving empty', err);
|
||||
createEmptyResponse(
|
||||
sourceInfo.format,
|
||||
sourceInfo.color,
|
||||
callback,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = {};
|
||||
if (headers['Last-Modified']) {
|
||||
response.modified = new Date(headers['Last-Modified']);
|
||||
}
|
||||
|
||||
if (format === 'pbf') {
|
||||
try {
|
||||
response.data = zlib.unzipSync(data);
|
||||
} catch (err) {
|
||||
console.log(
|
||||
'Skipping incorrect header for tile mbtiles://%s/%s/%s/%s.pbf',
|
||||
id,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
if (options.dataDecoratorFunc) {
|
||||
response.data = options.dataDecoratorFunc(
|
||||
sourceId,
|
||||
'data',
|
||||
response.data,
|
||||
z,
|
||||
x,
|
||||
y,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
response.data = data;
|
||||
}
|
||||
|
||||
callback(null, response);
|
||||
});
|
||||
}
|
||||
} else if (protocol === 'http' || protocol === 'https') {
|
||||
request(
|
||||
{
|
||||
|
|
@ -1447,6 +1499,7 @@ export const serve_rendered = {
|
|||
if (extension === 'pmtiles') {
|
||||
const info = await GetPMtilesInfo(mbtilesFile);
|
||||
const metadata = info.metadata;
|
||||
map.sources[metadata.name.toLowerCase()] = mbtilesFile
|
||||
|
||||
if (!repoobj.dataProjWGStoInternalWGS && metadata.proj4) {
|
||||
// how to do this for multiple sources with different proj4 defs?
|
||||
|
|
@ -1465,7 +1518,7 @@ export const serve_rendered = {
|
|||
`mbtiles://${name}/{z}/{x}/{y}.${metadata.format || 'pbf'}`,
|
||||
];
|
||||
delete source.scheme;
|
||||
console.log(source);
|
||||
//console.log(source);
|
||||
|
||||
if (
|
||||
!attributionOverride &&
|
||||
|
|
|
|||
Loading…
Reference in a new issue