From 3bac7acb489b801e0d48905a0176f81eb86492b8 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 16 Apr 2020 21:40:38 +0100 Subject: [PATCH 1/5] Use the tile coordinate as a pseudo URL Use the unique tile coordinate as a pseudo tile URL instead of a GeoJSON data URL which may not be unique --- examples/geojson-vt.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index d5627d6f08..b8d2f5c12e 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -82,6 +82,16 @@ fetch(url) }), }), tileUrlFunction: function (tileCoord) { + // Use the tile coordinate as a pseudo URL for caching purposes + return JSON.stringify(tileCoord); + }, + }); + // For tile loading obtain the GeoJSON for the tile coordinate + // before calling the default tileLoadFunction + const defaultTileLoadFunction = vectorSource.getTileLoadFunction(); + vectorSource.setTileLoadFunction( + function (tile, url) { + const tileCoord = JSON.parse(url); const data = tileIndex.getTile( tileCoord[0], tileCoord[1], @@ -94,9 +104,12 @@ fetch(url) }, replacer ); - return 'data:application/json;charset=UTF-8,' + geojson; - }, - }); + defaultTileLoadFunction( + tile, + 'data:application/json;charset=UTF-8,' + geojson + ); + } + ); const vectorLayer = new VectorTileLayer({ source: vectorSource, }); From 25b0cce8ed16cb5275aa50116f121855b0181235 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 16 Apr 2020 22:13:12 +0100 Subject: [PATCH 2/5] fix prettier --- examples/geojson-vt.js | 36 +++++++++++++++--------------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index b8d2f5c12e..50adc4ac7c 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -89,27 +89,21 @@ fetch(url) // For tile loading obtain the GeoJSON for the tile coordinate // before calling the default tileLoadFunction const defaultTileLoadFunction = vectorSource.getTileLoadFunction(); - vectorSource.setTileLoadFunction( - function (tile, url) { - const tileCoord = JSON.parse(url); - const data = tileIndex.getTile( - tileCoord[0], - tileCoord[1], - tileCoord[2] - ); - const geojson = JSON.stringify( - { - type: 'FeatureCollection', - features: data ? data.features : [], - }, - replacer - ); - defaultTileLoadFunction( - tile, - 'data:application/json;charset=UTF-8,' + geojson - ); - } - ); + vectorSource.setTileLoadFunction(function (tile, url) { + const tileCoord = JSON.parse(url); + const·data·=·tileIndex.getTile(tileCoord[0],·tileCoord[1],·tileCoord[2]); + const geojson = JSON.stringify( + { + type: 'FeatureCollection', + features: data ? data.features : [], + }, + replacer + ); + defaultTileLoadFunction( + tile, + 'data:application/json;charset=UTF-8,' + geojson + ); + }); const vectorLayer = new VectorTileLayer({ source: vectorSource, }); From 7d2e367fd0dada8962d2c0059d954b2215461ddf Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 16 Apr 2020 22:18:40 +0100 Subject: [PATCH 3/5] fix prettier --- examples/geojson-vt.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index 50adc4ac7c..d821570ddd 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -91,7 +91,7 @@ fetch(url) const defaultTileLoadFunction = vectorSource.getTileLoadFunction(); vectorSource.setTileLoadFunction(function (tile, url) { const tileCoord = JSON.parse(url); - const·data·=·tileIndex.getTile(tileCoord[0],·tileCoord[1],·tileCoord[2]); + const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]); const geojson = JSON.stringify( { type: 'FeatureCollection', From 71b866947f85c74c2f6ff904a37ae025170e6cb2 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 17 Apr 2020 00:01:28 +0100 Subject: [PATCH 4/5] read and set features in custom tileLoadFunction --- examples/geojson-vt.js | 50 ++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index d821570ddd..e9cac835d0 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -72,37 +72,35 @@ fetch(url) extent: 4096, debug: 1, }); - const vectorSource = new VectorTileSource({ - format: new GeoJSON({ - // Data returned from geojson-vt is in tile pixel units - dataProjection: new Projection({ - code: 'TILE_PIXELS', - units: 'tile-pixels', - extent: [0, 0, 4096, 4096], - }), + const format = new GeoJSON({ + // Data returned from geojson-vt is in tile pixel units + dataProjection: new Projection({ + code: 'TILE_PIXELS', + units: 'tile-pixels', + extent: [0, 0, 4096, 4096], }), + }); + const vectorSource = new VectorTileSource({ tileUrlFunction: function (tileCoord) { // Use the tile coordinate as a pseudo URL for caching purposes return JSON.stringify(tileCoord); }, - }); - // For tile loading obtain the GeoJSON for the tile coordinate - // before calling the default tileLoadFunction - const defaultTileLoadFunction = vectorSource.getTileLoadFunction(); - vectorSource.setTileLoadFunction(function (tile, url) { - const tileCoord = JSON.parse(url); - const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]); - const geojson = JSON.stringify( - { - type: 'FeatureCollection', - features: data ? data.features : [], - }, - replacer - ); - defaultTileLoadFunction( - tile, - 'data:application/json;charset=UTF-8,' + geojson - ); + tileLoadFunction: function (tile, url) { + const tileCoord = JSON.parse(url); + const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]); + const geojson = JSON.stringify( + { + type: 'FeatureCollection', + features: data ? data.features : [], + }, + replacer + ); + const features = format.readFeatures(geojson, { + extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord), + featureProjection: map.getView().getProjection() + }); + tile.setFeatures(features); + }, }); const vectorLayer = new VectorTileLayer({ source: vectorSource, From 6519b546479a308c3f16f6ab45a2651c5531ad40 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 17 Apr 2020 00:08:11 +0100 Subject: [PATCH 5/5] fix prettier --- examples/geojson-vt.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index e9cac835d0..a19a8f1748 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -87,7 +87,11 @@ fetch(url) }, tileLoadFunction: function (tile, url) { const tileCoord = JSON.parse(url); - const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]); + const data = tileIndex.getTile( + tileCoord[0], + tileCoord[1], + tileCoord[2] + ); const geojson = JSON.stringify( { type: 'FeatureCollection', @@ -97,7 +101,7 @@ fetch(url) ); const features = format.readFeatures(geojson, { extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord), - featureProjection: map.getView().getProjection() + featureProjection: map.getView().getProjection(), }); tile.setFeatures(features); },