private updateBasemapToGeopackage(): void {
const GeoPackageTileLayer = BaseTileLayer.createSubclass({
properties: {
geoPackage: null, // This will hold the opened GeoPackage
tileDao: null, // This will hold the Tile DAO (Tile Data Access Object)
},
fetchTile: function (level: number, row: number, col: number) {
const tileDao: TileDao<TileRow> = this.tileDao;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
return new Promise((resolve, reject) => {
// Step 3: Fetch the tile from the GeoPackage for the given zoom level, column, and row
const tile = tileDao.queryForTile(col, row, level);
console.log('COL: ', col, ' ROW: ', row, ' LEVEL: ', level);
if (tile) {
// Create an Image element
const image = new Image();
// Step 4: Draw the image onto the canvas when it loads
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
if (context) {
context.drawImage(image, 0, 0);
}
resolve(canvas); // Resolve the canvas as the tile
};
// Handle error if tile data cannot be loaded
image.onerror = function () {
reject(new Error('Tile image could not be loaded'));
};
// Set the tile source as the raw tile data in a Blob format
const blob = new Blob([tile.tileData], { type: 'image/png' });
image.src = URL.createObjectURL(blob);
} else {
// If no tile exists for this level/col/row, return null (empty tile)
resolve(null);
}
});
},
});
fetch('./test.gpkg')
.then((response) => response.arrayBuffer())
.then((data) => {
// return (window as any).GeoPackage.open(data);
return GeoPackageAPI.open(new Uint8Array(data));
// return GeoPackageAPI.open(data as Uint8Array);
})
.then((geoPackage: GeoPackage) => {
const tileTables = geoPackage.getTileTables();
console.log(tileTables);
// Use the first tile table (you can adapt this to load multiple if needed)
if (tileTables && tileTables.length) {
const tileDao = geoPackage.getTileDao(tileTables[0]);
// Step 6: Create an instance of the custom tile layer
const tileLayer = new GeoPackageTileLayer({
geoPackage: geoPackage,
tileDao: tileDao,
spatialReference: SPATIAL_REFERENCE,
tileInfo: TileInfo.create({
spatialReference: SPATIAL_REFERENCE,
}),
});
// Step 7: Add the tile layer to the map
// this.map.add(tileLayer);
const basemap = new Basemap({
baseLayers: [tileLayer],
title: 'Put the title here',
});
this.map.basemap = basemap;
const line = new Polyline({
paths: [
[
[-180, -90],
[-180, 90],
],
[
[-180, 90],
[180, 90],
],
[
[180, 90],
[180, -90],
],
[
[180, -90],
[-180, -90],
],
],
spatialReference: SPATIAL_REFERENCE,
});
const lineGraphic = new Graphic({
geometry: line,
symbol: symbolUtils.getPolylineSymbol(false, '#FF0000'),
});
this.mapView.graphics.add(lineGraphic);
}
});
}
