mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 02:41:09 +00:00
improve openlayers snippets; read header min/maxzoom [#3]
This commit is contained in:
Brandon Liu
@@ -2,8 +2,8 @@
|
||||
<head>
|
||||
<title>PMTiles OpenLayers Vector Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
|
||||
<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 {
|
||||
@@ -15,79 +15,80 @@
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
class OLPMTilesSource {
|
||||
constructor(url) {
|
||||
this._url = url;
|
||||
this._p = new pmtiles.PMTiles(url)
|
||||
}
|
||||
class VectorPMTilesSource 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];
|
||||
|
||||
url = () => {
|
||||
return "pmtiles://" + this._url + "/{z}/{x}/{y}";
|
||||
}
|
||||
|
||||
vectorTileLoadFunction = (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) => {
|
||||
tile.setState(1); // LOADING
|
||||
this._p.getZxy(z,x,y).then((tile_result) => {
|
||||
if (tile_result) {
|
||||
const format = tile.getFormat();
|
||||
const features = format.readFeatures(tile_result.data.buffer, {
|
||||
extent: extent,
|
||||
featureProjection: projection
|
||||
});
|
||||
tile.setFeatures(features);
|
||||
tile.setState(2); // LOADED
|
||||
} else {
|
||||
tile.setFeatures([]);
|
||||
tile.setState(4); // EMPTY
|
||||
}
|
||||
});
|
||||
tile.setLoader((extent, resolution, projection) => {
|
||||
tile.setState(1); // LOADING
|
||||
this._p.getZxy(z,x,y).then((tile_result) => {
|
||||
if (tile_result) {
|
||||
const format = tile.getFormat();
|
||||
const features = format.readFeatures(tile_result.data.buffer, {
|
||||
extent: extent,
|
||||
featureProjection: projection
|
||||
});
|
||||
tile.setFeatures(features);
|
||||
tile.setState(2); // LOADED
|
||||
} else {
|
||||
tile.setFeatures([]);
|
||||
tile.setState(4); // EMPTY
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const source = new OLPMTilesSource("https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles");
|
||||
constructor(options) {
|
||||
super({
|
||||
state:"loading",
|
||||
url: "pmtiles://" + options.url + "/{z}/{x}/{y}",
|
||||
format: new ol.format.MVT(),
|
||||
attributions: options.attributions
|
||||
});
|
||||
|
||||
const style = new ol.style.Style({
|
||||
this._p = new pmtiles.PMTiles(options.url);
|
||||
this._p.getHeader().then(h => {
|
||||
// TODO: set extent based on header
|
||||
this.tileGrid.minZoom = h.minZoom;
|
||||
this.tileGrid.maxZoom = h.maxZoom;
|
||||
this.setTileLoadFunction(this.tileLoadFunction);
|
||||
this.setState("ready");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const vectorLayer = new ol.layer.VectorTile({
|
||||
declutter: true,
|
||||
source: new VectorPMTilesSource({
|
||||
url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
|
||||
attributions: ["© Land Information New Zealand"]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'gray',
|
||||
width: 1,
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(20,20,20,0.9)',
|
||||
}),
|
||||
});
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
const vtLayer = new ol.layer.VectorTile({
|
||||
declutter: true,
|
||||
source: new ol.source.VectorTile({
|
||||
attributions:["© Land Information New Zealand"],
|
||||
maxZoom: 14, // this could come from the PMTiles header (async)
|
||||
format: new ol.format.MVT(), // this could come from the PMTiles header (async)
|
||||
url:source.url(),
|
||||
tileLoadFunction: source.vectorTileLoadFunction
|
||||
}),
|
||||
style: style,
|
||||
});
|
||||
|
||||
ol.proj.useGeographic();
|
||||
const map = new ol.Map({
|
||||
layers: [vtLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [172.606201,-43.556510],
|
||||
zoom: 7,
|
||||
multiWorld: true,
|
||||
}),
|
||||
});
|
||||
ol.proj.useGeographic();
|
||||
const map = new ol.Map({
|
||||
layers: [vectorLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [172.606201,-43.556510],
|
||||
zoom: 7
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<head>
|
||||
<title>PMTiles OpenLayers Raster Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
|
||||
<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 {
|
||||
@@ -15,61 +15,59 @@
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
class OLPMTilesSource {
|
||||
constructor(url) {
|
||||
this._url = url;
|
||||
this._p = new pmtiles.PMTiles(url)
|
||||
}
|
||||
|
||||
url = () => {
|
||||
return "pmtiles://" + this._url + "/{z}/{x}/{y}";
|
||||
}
|
||||
|
||||
rasterTileLoadFunction = (tile,url) => {
|
||||
tile.setState(1); // LOADING
|
||||
// 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];
|
||||
|
||||
this._p.getZxy(z,x,y).then((tile_result) => {
|
||||
if (tile_result) {
|
||||
const blob = new Blob([tile_result.data]);
|
||||
const imageUrl = window.URL.createObjectURL(blob);
|
||||
tile.getImage().src = imageUrl;
|
||||
tile.setState(2); // LOADED
|
||||
} else {
|
||||
tile.setState(4); // EMPTY
|
||||
}
|
||||
});
|
||||
}
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
const source = new OLPMTilesSource("https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles");
|
||||
constructor(options) {
|
||||
super({
|
||||
state: "loading",
|
||||
attributions: options.attributions
|
||||
});
|
||||
|
||||
const rasterLayer = new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
|
||||
url:source.url(),
|
||||
tileLoadFunction: source.rasterTileLoadFunction,
|
||||
tileSize:[512,512],
|
||||
maxZoom:9 // this could come from the PMTiles header (async)
|
||||
const p = new pmtiles.PMTiles(options.url);
|
||||
p.getHeader().then(h => {
|
||||
// TODO: set extent based on header
|
||||
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);
|
||||
image.width = 512;
|
||||
URL.revokeObjectURL(src);
|
||||
return image;
|
||||
});
|
||||
this.setState("ready");
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
ol.proj.useGeographic();
|
||||
const map = new ol.Map({
|
||||
layers: [rasterLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0,0],
|
||||
zoom: 0,
|
||||
multiWorld: true,
|
||||
}),
|
||||
});
|
||||
// TODO: tile size 512,512
|
||||
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"]
|
||||
})
|
||||
});
|
||||
|
||||
ol.proj.useGeographic();
|
||||
const map = new ol.Map({
|
||||
layers: [rasterLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0,0],
|
||||
zoom: 0,
|
||||
multiWorld: true
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user