merged from 'master'

This commit is contained in:
Thomas Hervey
2018-07-21 12:12:36 -04:00
7 changed files with 103 additions and 92 deletions

View File

@@ -2,13 +2,13 @@ import { select as d3_select } from 'd3-selection';
import { t } from '../util/locale';
import { geoScaleToZoom, geoVecLength } from '../geo';
import { utilPrefixCSSProperty, utilTile } from '../util';
import { utilPrefixCSSProperty, utilTiler } from '../util';
export function rendererTileLayer(context) {
var tileSize = 256;
var transformProp = utilPrefixCSSProperty('Transform');
var geotile = utilTile();
var geotile = utilTiler();
var _projection;
var _cache = {};

View File

@@ -1,4 +1,5 @@
/* global Mapillary:false */
import _find from 'lodash-es/find';
import _flatten from 'lodash-es/flatten';
import _forEach from 'lodash-es/forEach';
import _isEmpty from 'lodash-es/isEmpty';
@@ -19,9 +20,9 @@ import rbush from 'rbush';
import { geoExtent } from '../geo';
import { svgDefs } from '../svg';
import { utilDetect } from '../util/detect';
import { utilQsString, utilRebind, utilTile } from '../util';
import { utilQsString, utilRebind, utilTiler } from '../util';
var geoTile = utilTile();
var geoTile = utilTiler().skipNullIsland(true);
var apibase = 'https://a.mapillary.com/v3/';
var viewercss = 'mapillary-js/mapillary.min.css';
@@ -57,10 +58,18 @@ function loadTiles(which, url, projection) {
var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
var dimension = projection.clipExtent()[1];
var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0);
tiles = geoTile.filterNullIsland(tiles);
var tiles = geoTile.getTiles(projection, dimension, tileZoom);
geoTile.removeInflightRequests(which, tiles, abortRequest, ',0');
// abort inflight requests that are no longer needed
var cache = _mlyCache[which];
_forEach(cache.inflight, function(v, k) {
var wanted = _find(tiles, function(tile) { return k.indexOf(tile.id + ',') === 0; });
if (!wanted) {
abortRequest(v);
delete cache.inflight[k];
}
});
tiles.forEach(function(tile) {
loadNextTilePage(which, currZoom, url, tile);

View File

@@ -1,3 +1,4 @@
import _find from 'lodash-es/find';
import _flatten from 'lodash-es/flatten';
import _forEach from 'lodash-es/forEach';
import _map from 'lodash-es/map';
@@ -22,7 +23,7 @@ import rbush from 'rbush';
import { geoExtent } from '../geo';
import { utilTile } from '../util';
import { utilTiler } from '../util';
import { utilDetect } from '../util/detect';
import {
@@ -31,7 +32,7 @@ import {
utilSetTransform
} from '../util';
var geoTile = utilTile();
var geoTile = utilTiler().skipNullIsland(true);
var apibase = 'https://openstreetcam.org';
var maxResults = 1000;
@@ -62,14 +63,22 @@ function maxPageAtZoom(z) {
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 s = projection.scale() * 2 * Math.PI;
var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
var dimension = projection.clipExtent()[1];
var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0);
tiles = geoTile.filterNullIsland(tiles);
var tiles = geoTile.getTiles(projection, dimension, tileZoom);
geoTile.removeInflightRequests(which, tiles, abortRequest, ',0');
// abort inflight requests that are no longer needed
var cache = _oscCache[which];
_forEach(cache.inflight, function(v, k) {
var wanted = _find(tiles, function(tile) { return k.indexOf(tile.id + ',') === 0; });
if (!wanted) {
abortRequest(v);
delete cache.inflight[k];
}
});
tiles.forEach(function(tile) {
loadNextTilePage(which, currZoom, url, tile);

View File

@@ -2,6 +2,7 @@ import _chunk from 'lodash-es/chunk';
import _cloneDeep from 'lodash-es/cloneDeep';
import _extend from 'lodash-es/extend';
import _forEach from 'lodash-es/forEach';
import _find from 'lodash-es/find';
import _groupBy from 'lodash-es/groupBy';
import _isEmpty from 'lodash-es/isEmpty';
import _map from 'lodash-es/map';
@@ -28,11 +29,11 @@ import {
import {
utilRebind,
utilIdleWorker,
utilTile,
utilTiler,
utilQsString
} from '../util';
var geoTile = utilTile();
var geoTile = utilTiler();
var dispatch = d3_dispatch('authLoading', 'authDone', 'change', 'loading', 'loaded', 'loadedNotes');
var urlroot = 'https://www.openstreetmap.org';
@@ -802,13 +803,19 @@ export default {
tilezoom = _tileZoom;
}
// get tiles
var tiles = geoTile.getTiles(projection, dimensions, tilezoom, 0);
tiles = geoTile.filterNullIsland(tiles);
// determine the needed tiles to cover the view
var tiles = geoTile.getTiles(projection, dimensions, tilezoom);
// remove inflight requests that no longer cover the view..
// abort inflight requests that are no longer needed
var hadRequests = !_isEmpty(cache.inflight);
geoTile.removeInflightRequests(cache, tiles, abortRequest);
_forEach(cache.inflight, function(v, k) {
var wanted = _find(tiles, function(tile) { return k === tile.id; });
if (!wanted) {
abortRequest(v);
delete cache.inflight[k];
}
});
if (hadRequests && !loadingNotes && _isEmpty(cache.inflight)) {
dispatch.call('loaded'); // stop the spinner
}

View File

@@ -1,4 +1,5 @@
import _extend from 'lodash-es/extend';
import _find from 'lodash-es/find';
import _flatten from 'lodash-es/flatten';
import _forEach from 'lodash-es/forEach';
import _map from 'lodash-es/map';
@@ -28,11 +29,11 @@ import {
} from '../geo';
import { utilDetect } from '../util/detect';
import { utilQsString, utilRebind, utilTile } from '../util';
import { utilQsString, utilRebind, utilTiler } from '../util';
import Q from 'q';
var geoTile = utilTile();
var geoTile = utilTiler().skipNullIsland(true);
var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?';
var streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/';
@@ -53,6 +54,7 @@ var _pannellumViewer;
var _sceneOptions;
var _dataUrlArray = [];
/**
* abortRequest().
*/
@@ -60,19 +62,6 @@ function abortRequest(i) {
i.abort();
}
/**
* nearNullIsland().
*/
function nearNullIsland(x, y, z) {
if (z >= 7) {
var center = Math.pow(2, z - 1);
var width = Math.pow(2, z - 6);
var min = center - (width / 2);
var max = center + (width / 2) - 1;
return x >= min && x <= max && y >= min && y <= max;
}
return false;
}
/**
* localeTimeStamp().
@@ -95,8 +84,20 @@ function loadTiles(which, url, projection, margin) {
var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
var dimension = projection.clipExtent()[1];
var tiles = geoTile.getTiles(projection, dimension, tileZoom, margin);
tiles = geoTile.filterNullIsland(tiles);
var tiles = geoTile
.margin(margin)
.getTiles(projection, dimension, tileZoom);
// abort inflight requests that are no longer needed
var cache = _ssCache[which];
_forEach(cache.inflight, function(v, k) {
var wanted = _find(tiles, function(tile) { return k.indexOf(tile.id + ',') === 0; });
if (!wanted) {
abortRequest(v);
delete cache.inflight[k];
}
});
tiles.forEach(function (tile) {
loadNextTilePage(which, currZoom, url, tile);

View File

@@ -23,6 +23,6 @@ export { utilSessionMutex } from './session_mutex';
export { utilStringQs } from './util';
export { utilSuggestNames } from './suggest_names';
export { utilTagText } from './util';
export { utilTile } from './tile';
export { utilTiler } from './tiler';
export { utilTriggerEvent } from './trigger_event';
export { utilWrap } from './util';

View File

@@ -1,22 +1,26 @@
import _filter from 'lodash-es/filter';
import _find from 'lodash-es/find';
import { range as d3_range } from 'd3-array';
import { geoExtent } from '../geo';
export function utilTile() {
export function utilTiler() {
var _size = [960, 500];
var _scale = 256;
var _scaleExtent = [0, 20];
var _translate = [_size[0] / 2, _size[1] / 2];
var _zoomDelta = 0;
var _margin = 0;
var _skipNullIsland = false;
function bound(val) {
return Math.min(_scaleExtent[1], Math.max(_scaleExtent[0], val));
}
function nearNullIsland(x, y, z) {
function nearNullIsland(tile) {
var x = tile[0];
var y = tile[1];
var z = tile[2];
if (z >= 7) {
var center = Math.pow(2, z - 1);
var width = Math.pow(2, z - 6);
@@ -27,7 +31,8 @@ export function utilTile() {
return false;
}
function tile() {
function tiler() {
var z = Math.max(Math.log(_scale) / Math.LN2 - 8, 0);
var z0 = bound(Math.round(z + _zoomDelta));
var k = Math.pow(2, z - z0 + 8);
@@ -72,13 +77,7 @@ export function utilTile() {
* 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(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.
// See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx.
// 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).
tiler.getTiles = function(projection, dimensions, tilezoom) {
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);
@@ -87,18 +86,19 @@ export function utilTile() {
s / 2 - projection.translate()[1]
];
var tiler = this
this
.scaleExtent([tilezoom, tilezoom])
.scale(s)
.size(dimensions)
.translate(projection.translate())
.margin(margin || 0); // request nearby tiles so we can connect sequences.
.translate(projection.translate());
var tiles = tiler()
return tiler()
.map(function(tile) {
if (_skipNullIsland && nearNullIsland(tile)) {
return false;
}
var x = tile[0] * ts - origin[0];
var y = tile[1] * ts - origin[1];
return {
id: tile.toString(),
xyz: tile,
@@ -107,73 +107,58 @@ export function utilTile() {
projection.invert([x + ts, y])
)
};
});
return tiles;
}).filter(Boolean);
};
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) {
var wanted = _find(tiles, function(tile) { return i === tile.id + modifier; });
if (!wanted) {
delete cache.inflight[i];
}
return !wanted;
}).map(callback); // abort request
};
tile.scaleExtent = function(val) {
tiler.scaleExtent = function(val) {
if (!arguments.length) return _scaleExtent;
_scaleExtent = val;
return tile;
return tiler;
};
tile.size = function(val) {
tiler.size = function(val) {
if (!arguments.length) return _size;
_size = val;
return tile;
return tiler;
};
tile.scale = function(val) {
tiler.scale = function(val) {
if (!arguments.length) return _scale;
_scale = val;
return tile;
return tiler;
};
tile.translate = function(val) {
tiler.translate = function(val) {
if (!arguments.length) return _translate;
_translate = val;
return tile;
return tiler;
};
tile.zoomDelta = function(val) {
tiler.zoomDelta = function(val) {
if (!arguments.length) return _zoomDelta;
_zoomDelta = +val;
return tile;
return tiler;
};
// number to extend the rows/columns beyond those covering the viewport
tile.margin = function(val) {
tiler.margin = function(val) {
if (!arguments.length) return _margin;
_margin = +val;
return tile;
return tiler;
};
return tile;
tiler.skipNullIsland = function(val) {
if (!arguments.length) return _skipNullIsland;
_skipNullIsland = val;
return tiler;
};
return tiler;
}