mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 19:01:08 +00:00
76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>PMTiles OpenLayers Raster Example</title>
|
|
<meta charset="utf-8"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
|
|
<script src="https://unpkg.com/pmtiles@2.7.2/dist/index.js"></script>
|
|
<style>
|
|
body, #map {
|
|
height:100vh;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script type="text/javascript">
|
|
class RasterPMTilesSource 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({
|
|
state: "loading",
|
|
attributions: options.attributions,
|
|
tileSize: options.tileSize
|
|
});
|
|
|
|
const p = new pmtiles.PMTiles(options.url);
|
|
p.getHeader().then(h => {
|
|
if (h.tileType !== pmtiles.TileType.Jpeg && h.tileType !== pmtiles.TileType.Png && h.tileType !== pmtiles.TileType.Webp) {
|
|
console.warn("Warning: pmtiles tile type is not jpeg, png, or webp");
|
|
}
|
|
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 blob = new Blob([response.data]);
|
|
const src = URL.createObjectURL(blob);
|
|
const image = await this.loadImage(src);
|
|
URL.revokeObjectURL(src);
|
|
return image;
|
|
});
|
|
this.setState("ready");
|
|
})
|
|
}
|
|
}
|
|
|
|
const rasterLayer = new ol.layer.WebGLTile({
|
|
source: new RasterPMTilesSource({
|
|
url:"https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
|
|
attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
|
|
tileSize: [512,512]
|
|
})
|
|
});
|
|
|
|
ol.proj.useGeographic();
|
|
const map = new ol.Map({
|
|
layers: [rasterLayer],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [0,0],
|
|
zoom: 1,
|
|
multiWorld: true
|
|
}),
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|