mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

change ol-pmtiles to TypeScript [#312] (#444)

Browse Source 
* change ol-pmtiles to TypeScript [#444]

* olpmtiles: 1.0.0
* accept either a string or pmtiles.Source for the url option
* package.json works for ESM/CJS/IIFE [#312, #443]
* replace npm install with npm ci on github actions
This commit is contained in:
Brandon Liu
2024-09-11 16:36:48 +08:00
committed by GitHub
parent 089d13d637
commit ab5534df7e
11 changed files with 2429 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
openlayers/src/index.js
View File

@@ -1,102 +0,0 @@
import DataTile from "ol/source/DataTile.js";
import VectorTile from "ol/source/VectorTile.js";
import TileState from "ol/TileState.js";
import { MVT } from "ol/format.js";
import * as pmtiles from "pmtiles";
export class PMTilesRasterSource extends DataTile {
loadImage = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener("load", () => resolve(img));
img.addEventListener("error", () => reject(new Error("load failed")));
img.src = src;
});
};
constructor(options) {
super({
...options,
...{
state: "loading",
},
});
const fetchSource = new pmtiles.FetchSource(
options.url,
new Headers(options.headers),
);
const p = new pmtiles.PMTiles(fetchSource);
p.getHeader().then((h) => {
this.tileGrid.minZoom = h.minZoom;
this.tileGrid.maxZoom = h.maxZoom;
this.setLoader(async (z, x, y) => {
const response = await p.getZxy(z, x, y);
const src = URL.createObjectURL(new Blob([response.data]));
const image = await this.loadImage(src);
URL.revokeObjectURL(src);
return image;
});
this.setState("ready");
});
}
}
export class PMTilesVectorSource extends VectorTile {
tileLoadFunction = (tile, url) => {
// the URL construction is done internally by OL, so we need to parse it
// back out here using a hacky regex
const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
const result = url.match(re);
const z = +result[2];
const x = +result[3];
const y = +result[4];
tile.setLoader((extent, resolution, projection) => {
this.pmtiles_
.getZxy(z, x, y)
.then((tile_result) => {
if (tile_result) {
const format = tile.getFormat();
tile.setFeatures(
format.readFeatures(tile_result.data, {
extent: extent,
featureProjection: projection,
}),
);
tile.setState(TileState.LOADED);
} else {
tile.setFeatures([]);
tile.setState(TileState.EMPTY);
}
})
.catch((err) => {
tile.setFeatures([]);
tile.setState(TileState.ERROR);
});
});
};
constructor(options) {
super({
...options,
...{
state: "loading",
url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
format: options.format || new MVT(),
},
});
const fetchSource = new pmtiles.FetchSource(
options.url,
new Headers(options.headers),
);
this.pmtiles_ = new pmtiles.PMTiles(fetchSource);
this.pmtiles_.getHeader().then((h) => {
this.tileGrid.minZoom = h.minZoom;
this.tileGrid.maxZoom = h.maxZoom;
this.setTileLoadFunction(this.tileLoadFunction);
this.setState("ready");
});
}
}

140
openlayers/src/index.ts Normal file
View File

@@ -0,0 +1,140 @@
import { type Data } from "ol/DataTile";
import {
type Options as DataTileSourceOptions,
default as DataTileSource,
} from "ol/source/DataTile";
import TileState from "ol/TileState";
import { MVT } from "ol/format";
import type TileSource from "ol/source/Tile";
import { type Extent } from "ol/extent";
import type Projection from "ol/proj/Projection";
import type Tile from "ol/Tile";
import type VectorTile from "ol/VectorTile";
import {
type Options as VectorTileSourceOptions,
default as VectorTileSource,
} from "ol/source/VectorTile";
import type RenderFeature from "ol/render/Feature";
import { createXYZ, extentFromProjection } from "ol/tilegrid";
import { PMTiles, Header, Source } from "pmtiles";
export class PMTilesRasterSource extends DataTileSource {
loadImage = (src: string): Promise<HTMLImageElement> => {
return new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener("load", () => resolve(img));
img.addEventListener("error", () => reject(new Error("load failed")));
img.src = src;
});
};
constructor(options: DataTileSourceOptions & { url: string | Source }) {
super({
...options,
...{
state: "loading",
},
});
const p = new PMTiles(options.url);
p.getHeader().then((h: Header) => {
const projection =
options.projection === undefined ? "EPSG:3857" : options.projection;
this.tileGrid =
options.tileGrid ||
createXYZ({
extent: extentFromProjection(projection),
maxResolution: options.maxResolution,
minZoom: h.minZoom,
maxZoom: h.maxZoom,
tileSize: options.tileSize,
});
this.setLoader(async (z, x, y): Promise<Data> => {
const response = await p.getZxy(z, x, y);
if (!response) {
return new Uint8Array();
}
const src = URL.createObjectURL(new Blob([response.data]));
const image = await this.loadImage(src);
URL.revokeObjectURL(src);
return image;
});
this.setState("ready");
});
}
}
export class PMTilesVectorSource extends VectorTileSource {
pmtiles_: PMTiles;
tileLoadFunction = (tile: Tile, url: string) => {
const vtile = tile as VectorTile;
// the URL construction is done internally by OL, so we need to parse it
// back out here using a hacky regex
const re = new RegExp(/pmtiles:\/\/(\d+)\/(\d+)\/(\d+)/);
const result = url.match(re);
if (!(result && result.length >= 4)) {
throw Error("Could not parse tile URL");
}
const z = +result[1];
const x = +result[2];
const y = +result[3];
vtile.setLoader(
(extent: Extent, resolution: number, projection: Projection) => {
this.pmtiles_
.getZxy(z, x, y)
.then((tile_result) => {
if (tile_result) {
const format = vtile.getFormat();
vtile.setFeatures(
format.readFeatures(tile_result.data, {
extent: extent,
featureProjection: projection,
}),
);
vtile.setState(TileState.LOADED);
} else {
vtile.setFeatures([]);
vtile.setState(TileState.EMPTY);
}
})
.catch((err) => {
vtile.setFeatures([]);
vtile.setState(TileState.ERROR);
});
},
);
};
constructor(
options: VectorTileSourceOptions<RenderFeature> & { url: string | Source },
) {
super({
...options,
...{
state: "loading",
url: "pmtiles://{z}/{x}/{y}",
format: options.format || new MVT(),
},
});
this.pmtiles_ = new PMTiles(options.url);
this.pmtiles_.getHeader().then((h: Header) => {
const projection = options.projection || "EPSG:3857";
const extent = options.extent || extentFromProjection(projection);
this.tileGrid =
options.tileGrid ||
createXYZ({
extent: extent,
maxResolution: options.maxResolution,
maxZoom: options.maxZoom !== undefined ? options.maxZoom : h.maxZoom,
minZoom: h.minZoom,
tileSize: options.tileSize || 512,
});
this.setTileLoadFunction(this.tileLoadFunction);
this.setState("ready");
});
}
}

108
openlayers/src/script_includes.js
View File

@@ -1,108 +0,0 @@
// IMPORTANT: this file is manually edited!
// copy any changes made from src/index.js to here
// to automate this we need a rollup or esbuild script
// to resolve the imports to the ol global correctly
// as well as get the enum values of TileState, which is elided
// import DataTile from "ol/source/DataTile";
// import VectorTile from "ol/source/VectorTile";
// import TileState from "ol/TileState";
// import { MVT } from "ol/format";
import * as pmtiles from "pmtiles";
export class PMTilesRasterSource extends ol.source.DataTile {
loadImage = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener("load", () => resolve(img));
img.addEventListener("error", () => reject(new Error("load failed")));
img.src = src;
});
};
constructor(options) {
super({
...options,
...{
state: "loading",
},
});
const fetchSource = new pmtiles.FetchSource(
options.url,
new Headers(options.headers),
);
const p = new pmtiles.PMTiles(fetchSource);
p.getHeader().then((h) => {
this.tileGrid.minZoom = h.minZoom;
this.tileGrid.maxZoom = h.maxZoom;
this.setLoader(async (z, x, y) => {
const response = await p.getZxy(z, x, y);
const src = URL.createObjectURL(new Blob([response.data]));
const image = await this.loadImage(src);
URL.revokeObjectURL(src);
return image;
});
this.setState("ready");
});
}
}
export class PMTilesVectorSource extends ol.source.VectorTile {
tileLoadFunction = (tile, url) => {
// the URL construction is done internally by OL, so we need to parse it
// back out here using a hacky regex
const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
const result = url.match(re);
const z = +result[2];
const x = +result[3];
const y = +result[4];
tile.setLoader((extent, resolution, projection) => {
this.pmtiles_
.getZxy(z, x, y)
.then((tile_result) => {
if (tile_result) {
const format = tile.getFormat();
tile.setFeatures(
format.readFeatures(tile_result.data, {
extent: extent,
featureProjection: projection,
}),
);
tile.setState(2);
} else {
tile.setFeatures([]);
tile.setState(4);
}
})
.catch((err) => {
tile.setFeatures([]);
tile.setState(3);
});
});
};
constructor(options) {
super({
...options,
...{
state: "loading",
url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
format: options.format || new ol.format.MVT(),
},
});
const fetchSource = new pmtiles.FetchSource(
options.url,
new Headers(options.headers),
);
this.pmtiles_ = new pmtiles.PMTiles(fetchSource);
this.pmtiles_.getHeader().then((h) => {
this.tileGrid.minZoom = h.minZoom;
this.tileGrid.maxZoom = h.maxZoom;
this.setTileLoadFunction(this.tileLoadFunction);
this.setState("ready");
});
}
}