From 92f6670640f42f97fbce43e6ed9547b8c26d0145 Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Tue, 1 Nov 2022 16:50:39 +0800 Subject: [PATCH] openlayers raster example --- js/examples/openlayers.html | 10 ++-- js/examples/openlayers_raster.html | 75 ++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 js/examples/openlayers_raster.html diff --git a/js/examples/openlayers.html b/js/examples/openlayers.html index f5ba60f..b07da80 100644 --- a/js/examples/openlayers.html +++ b/js/examples/openlayers.html @@ -1,6 +1,6 @@ - PMTiles OpenLayers Example + PMTiles OpenLayers Vector Example @@ -25,7 +25,7 @@ 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 // back out here using a hacky regex 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 country = new ol.style.Style({ + const style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'gray', width: 1, @@ -72,9 +72,9 @@ 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.tileLoadFunction + tileLoadFunction: source.vectorTileLoadFunction }), - style: country, + style: style, }); ol.proj.useGeographic(); diff --git a/js/examples/openlayers_raster.html b/js/examples/openlayers_raster.html new file mode 100644 index 0000000..2a60520 --- /dev/null +++ b/js/examples/openlayers_raster.html @@ -0,0 +1,75 @@ + + + PMTiles OpenLayers Raster Example + + + + + + + +
+ + +