leaflet adapter supports cancellation and min/max zoom from header [#48]

This commit is contained in:
Brandon Liu
2022-10-15 17:02:18 +08:00
parent 37f315cc57
commit 6438d87ff6

View File

@@ -4,24 +4,46 @@ import { PMTiles, Source } from "./index";
export const leafletRasterLayer = (source: PMTiles, options: any) => { export const leafletRasterLayer = (source: PMTiles, options: any) => {
const cls = L.GridLayer.extend({ const cls = L.GridLayer.extend({
createTile: function (coord: any, done: any) { createTile: function (coord: any, done: any) {
const tile: any = document.createElement("img"); if (!this.pmtilesHeaderLoaded) {
source.getHeader().then((h) => {
// Unfortunately this needs to call into private leaflet properties
// and might break in future versions
// because layer creation is synchronous and these are specified at
// initialization time
// TODO: set bounds?
if (this.options.maxNativeZoom == undefined) {
this.options.minNativeZoom = h.minZoom;
}
if (this.options.maxNativeZoom == undefined) {
this.options.maxNativeZoom = h.maxZoom;
}
});
this.pmtilesHeaderLoaded = true;
}
const el: any = document.createElement("img");
const controller = new AbortController(); const controller = new AbortController();
const signal = controller.signal; const signal = controller.signal;
tile.cancel = () => { el.cancel = () => {
controller.abort(); controller.abort();
}; };
source.getZxy(coord.z, coord.x, coord.y).then((arr) => { source
if (arr) { .getZxy(coord.z, coord.x, coord.y, signal)
const blob = new Blob([arr.data], { type: "image/png" }); .then((arr) => {
const imageUrl = window.URL.createObjectURL(blob); if (arr) {
tile.src = imageUrl; const blob = new Blob([arr.data]);
tile.cancel = null; const imageUrl = window.URL.createObjectURL(blob);
done(null, tile); el.src = imageUrl;
} else { el.cancel = null;
// return an empty image done(null, el);
} }
}); })
return tile; .catch((e) => {
if (e.name !== "AbortError") {
throw e;
}
});
return el;
}, },
_removeTile: function (key: string) { _removeTile: function (key: string) {