From 386d375b7a80cc55c77001900c44c9b58dd51398 Mon Sep 17 00:00:00 2001 From: Thomas Hervey Date: Thu, 19 Jul 2018 10:51:39 -0400 Subject: [PATCH] fix excessive note tiling and network request --- modules/services/mapillary.js | 5 ++++- modules/services/openstreetcam.js | 5 ++++- modules/services/osm.js | 6 +++--- modules/services/streetside.js | 4 +++- modules/util/tile.js | 22 ++++++++++++++++++---- 5 files changed, 32 insertions(+), 10 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index db387fd1f..cdf04aa3b 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -84,7 +84,10 @@ function loadTiles(which, url, projection) { var s = projection.scale() * 2 * Math.PI; var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); - var tiles = geoTile.filterNullIsland(geoTile.getTiles(tileZoom, projection, projection.clipExtent()[1], 0)); + var dimension = projection.clipExtent()[1]; + var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0); + tiles = geoTile.filterNullIsland(tiles); + geoTile.removeInflightRequests(which, tiles, abortRequest, ',0'); tiles.forEach(function(tile) { diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index be2953f16..73483dddc 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -79,7 +79,10 @@ function loadTiles(which, url, projection) { var s = projection.scale() * 2 * Math.PI, currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); - var tiles = geoTile.filterNullIsland(geoTile.getTiles(tileZoom, projection, projection.clipExtent()[1], 0)); + var dimension = projection.clipExtent()[1]; + var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0); + tiles = geoTile.filterNullIsland(tiles); + geoTile.removeInflightRequests(which, tiles, abortRequest, ',0'); tiles.forEach(function(tile) { diff --git a/modules/services/osm.js b/modules/services/osm.js index 67a2e29f2..4263662e2 100644 --- a/modules/services/osm.js +++ b/modules/services/osm.js @@ -778,13 +778,13 @@ export default { tilezoom = _tileZoom; } - - var tiles = geoTile.filterNullIsland(geoTile.getTiles(_tileZoom, projection, dimensions, 0)); + // get tiles + var tiles = geoTile.getTiles(projection, dimensions, tilezoom, 0); + tiles = geoTile.filterNullIsland(tiles); // remove inflight requests that no longer cover the view.. var hadRequests = !_isEmpty(cache.inflight); geoTile.removeInflightRequests(cache, tiles, abortRequest); - if (hadRequests && !loadingNotes && _isEmpty(cache.inflight)) { dispatch.call('loaded'); // stop the spinner } diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 4252c05a8..52ee2c14f 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -94,7 +94,9 @@ function loadTiles(which, url, projection, margin) { var s = projection.scale() * 2 * Math.PI; var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); - var tiles = geoTile.filterNullIsland(geoTile.getTiles(tileZoom, projection, projection.clipExtent()[1], margin)); + var dimension = projection.clipExtent()[1]; + var tiles = geoTile.getTiles(projection, dimension, tileZoom, margin); + tiles = geoTile.filterNullIsland(tiles); tiles.forEach(function (tile) { loadNextTilePage(which, currZoom, url, tile); diff --git a/modules/util/tile.js b/modules/util/tile.js index 546b4f10a..2179525f7 100644 --- a/modules/util/tile.js +++ b/modules/util/tile.js @@ -66,12 +66,14 @@ export function utilTile() { return tiles; } + /** * getTiles() returns array of d3 geo tiles. * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from * an area around (and including) the current map view extents. */ - tile.getTiles = function(tileZoom, projection, dimensions, margin) { + tile.getTiles = function(projection, dimensions, tilezoom, margin) { + // s is the current map scale // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground. // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification. @@ -79,23 +81,24 @@ export function utilTile() { // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels). var s = projection.scale() * 2 * Math.PI; var z = Math.max(Math.log(s) / Math.log(2) - 8, 0); - var ts = 256 * Math.pow(2, z - tileZoom); + var ts = 256 * Math.pow(2, z - tilezoom); var origin = [ s / 2 - projection.translate()[0], s / 2 - projection.translate()[1] ]; var tiler = this - .scaleExtent([tileZoom, tileZoom]) + .scaleExtent([tilezoom, tilezoom]) .scale(s) .size(dimensions) .translate(projection.translate()) .margin(margin || 0); // request nearby tiles so we can connect sequences. - return tiler() + var tiles = tiler() .map(function(tile) { var x = tile[0] * ts - origin[0]; var y = tile[1] * ts - origin[1]; + return { id: tile.toString(), xyz: tile, @@ -105,14 +108,18 @@ export function utilTile() { ) }; }); + + return tiles; }; + tile.filterNullIsland = function(tiles) { return tiles.filter(function(t) { return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]); }); }; + // remove inflight requests that no longer cover the view.. tile.removeInflightRequests = function(cache, tiles, callback, modifier) { return _filter(cache.inflight, function(v, i) { @@ -124,36 +131,42 @@ export function utilTile() { }).map(callback); // abort request }; + tile.scaleExtent = function(val) { if (!arguments.length) return _scaleExtent; _scaleExtent = val; return tile; }; + tile.size = function(val) { if (!arguments.length) return _size; _size = val; return tile; }; + tile.scale = function(val) { if (!arguments.length) return _scale; _scale = val; return tile; }; + tile.translate = function(val) { if (!arguments.length) return _translate; _translate = val; return tile; }; + tile.zoomDelta = function(val) { if (!arguments.length) return _zoomDelta; _zoomDelta = +val; return tile; }; + // number to extend the rows/columns beyond those covering the viewport tile.margin = function(val) { if (!arguments.length) return _margin; @@ -161,5 +174,6 @@ export function utilTile() { return tile; }; + return tile; }