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

openlayers raster example

Browse Source
This commit is contained in:
Brandon Liu
2022-11-01 16:50:39 +08:00
parent d010efd1ff
commit 92f6670640
2 changed files with 80 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/examples/openlayers.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>PMTiles OpenLayers Example</title> <title>PMTiles OpenLayers Vector Example</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script> <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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
@@ -25,7 +25,7 @@
return "pmtiles://" + this._url + "/{z}/{x}/{y}"; return "pmtiles://" + this._url + "/{z}/{x}/{y}";
} }
tileLoadFunction = (tile,url) => { vectorTileLoadFunction = (tile,url) => {
// the URL construction is done internally by OL, so we need to parse it // the URL construction is done internally by OL, so we need to parse it
// back out here using a hacky regex // back out here using a hacky regex
const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/); const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
@@ -55,7 +55,7 @@
const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/protomaps-sample-datasets/nz-buildings-v3.pmtiles"); const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/protomaps-sample-datasets/nz-buildings-v3.pmtiles");
const country = new ol.style.Style({ const style = new ol.style.Style({
stroke: new ol.style.Stroke({ stroke: new ol.style.Stroke({
color: 'gray', color: 'gray',
width: 1, width: 1,
@@ -72,9 +72,9 @@
maxZoom: 14, // this could come from the PMTiles header (async) maxZoom: 14, // this could come from the PMTiles header (async)
format: new ol.format.MVT(), // this could come from the PMTiles header (async) format: new ol.format.MVT(), // this could come from the PMTiles header (async)
url:source.url(), url:source.url(),
tileLoadFunction: source.tileLoadFunction tileLoadFunction: source.vectorTileLoadFunction
}), }),
style: country, style: style,
}); });
ol.proj.useGeographic(); ol.proj.useGeographic();

75
js/examples/openlayers_raster.html Normal file
View File

@@ -0,0 +1,75 @@
<html>
<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://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
<style>
body, #map {
height:100vh;
margin: 0;
}
</style>
</head>
<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
}
});
}
}
const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/us-west/terrarium_z9.pmtiles");
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)
})
})
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>