Don't need to pass dimensions to sublayers.. use projection.clipExtent

(the dimensions call to layers is to set width/height on svg surface element)
This commit is contained in:
Bryan Housel
2016-10-30 22:40:11 -04:00
parent f98b89cd15
commit 9ee790c1cc
5 changed files with 43 additions and 60 deletions
+16 -15
View File
@@ -43,7 +43,7 @@ function nearNullIsland(x, y, z) {
}
function getTiles(projection, dimensions) {
function getTiles(projection) {
var s = projection.scale() * 2 * Math.PI,
z = Math.max(Math.log(s) / Math.log(2) - 8, 0),
ts = 256 * Math.pow(2, z - tileZoom),
@@ -54,7 +54,7 @@ function getTiles(projection, dimensions) {
return d3geoTile()
.scaleExtent([tileZoom, tileZoom])
.scale(s)
.size(dimensions)
.size(projection.clipExtent()[1])
.translate(projection.translate())()
.map(function(tile) {
var x = tile[0] * ts - origin[0],
@@ -71,8 +71,8 @@ function getTiles(projection, dimensions) {
}
function loadTiles(which, url, projection, dimensions) {
var tiles = getTiles(projection, dimensions).filter(function(t) {
function loadTiles(which, url, projection) {
var tiles = getTiles(projection).filter(function(t) {
var xyz = t.id.split(',');
return !nearNullIsland(xyz[0], xyz[1], xyz[2]);
});
@@ -139,7 +139,8 @@ function loadTilePage(which, url, tile, page) {
// partition viewport into `psize` x `psize` regions
function partitionViewport(psize, projection, dimensions) {
function partitionViewport(psize, projection) {
var dimensions = projection.clipExtent()[1];
psize = psize || 16;
var cols = d3.range(0, dimensions[0], psize),
rows = d3.range(0, dimensions[1], psize),
@@ -159,10 +160,10 @@ function partitionViewport(psize, projection, dimensions) {
// no more than `limit` results per partition.
function searchLimited(psize, limit, projection, dimensions, rtree) {
function searchLimited(psize, limit, projection, rtree) {
limit = limit || 3;
var partitions = partitionViewport(psize, projection, dimensions);
var partitions = partitionViewport(psize, projection);
return _.flatten(_.compact(_.map(partitions, function(extent) {
return rtree.search(extent.bbox())
.slice(0, limit)
@@ -204,15 +205,15 @@ export default {
},
images: function(projection, dimensions) {
images: function(projection) {
var psize = 16, limit = 3;
return searchLimited(psize, limit, projection, dimensions, mapillaryCache.images.rtree);
return searchLimited(psize, limit, projection, mapillaryCache.images.rtree);
},
signs: function(projection, dimensions) {
signs: function(projection) {
var psize = 32, limit = 3;
return searchLimited(psize, limit, projection, dimensions, mapillaryCache.signs.rtree);
return searchLimited(psize, limit, projection, mapillaryCache.signs.rtree);
},
@@ -235,15 +236,15 @@ export default {
},
loadImages: function(projection, dimensions) {
loadImages: function(projection) {
var url = apibase + 'search/im/geojson?';
loadTiles('images', url, projection, dimensions);
loadTiles('images', url, projection);
},
loadSigns: function(context, projection, dimensions) {
loadSigns: function(context, projection) {
var url = apibase + 'search/im/geojson/or?';
loadTiles('signs', url, projection, dimensions);
loadTiles('signs', url, projection);
// load traffico css
d3.select('head').selectAll('#traffico')
-5
View File
@@ -94,11 +94,6 @@ export function svgLayers(projection, context) {
drawLayers.dimensions = function(_) {
if (!arguments.length) return utilGetDimensions(svg);
utilSetDimensions(svg, _);
layers.forEach(function(obj) {
if (obj.layer.dimensions) {
obj.layer.dimensions(_);
}
});
return this;
};
+7 -14
View File
@@ -1,12 +1,11 @@
import * as d3 from 'd3';
import _ from 'lodash';
import { svgPointTransform } from './point_transform';
import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';
import { services } from '../services/index';
export function svgMapillaryImages(projection, context, dispatch) {
var debouncedRedraw = _.debounce(function () { dispatch.call('change'); }, 1000),
var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000),
minZoom = 12,
minViewfieldZoom = 16,
layer = d3.select(null),
@@ -23,7 +22,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
function getMapillary() {
if (services.mapillary && !_mapillary) {
_mapillary = services.mapillary;
_mapillary.event.on('loadedImages', debouncedRedraw);
_mapillary.event.on('loadedImages', throttledRedraw);
} else if (!services.mapillary && _mapillary) {
_mapillary = null;
}
@@ -44,7 +43,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
.transition()
.duration(500)
.style('opacity', 1)
.on('end', debouncedRedraw);
.on('end', function () { dispatch.call('change'); });
}
@@ -54,7 +53,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
mapillary.hideViewer();
}
debouncedRedraw.cancel();
throttledRedraw.cancel();
layer
.transition()
@@ -97,7 +96,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
function update() {
var mapillary = getMapillary(),
data = (mapillary ? mapillary.images(projection, utilGetDimensions(layer)) : []),
data = (mapillary ? mapillary.images(projection) : []),
imageKey = mapillary ? mapillary.selectedImage() : null;
var markers = layer.selectAll('.viewfield-group')
@@ -112,7 +111,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
.classed('selected', function(d) { return d.key === imageKey; })
.on('click', click);
markers
markers = markers
.merge(enter)
.attr('transform', transform);
@@ -159,7 +158,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
if (mapillary && ~~context.map().zoom() >= minZoom) {
editOn();
update();
mapillary.loadImages(projection, utilGetDimensions(layer));
mapillary.loadImages(projection);
} else {
editOff();
}
@@ -185,12 +184,6 @@ export function svgMapillaryImages(projection, context, dispatch) {
};
drawImages.dimensions = function(_) {
if (!arguments.length) return utilGetDimensions(layer);
utilSetDimensions(layer, _);
return this;
};
init();
return drawImages;
}
+5 -13
View File
@@ -1,11 +1,10 @@
import * as d3 from 'd3';
import _ from 'lodash';
import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';
import { services } from '../services/index';
export function svgMapillarySigns(projection, context, dispatch) {
var debouncedRedraw = _.debounce(function () { dispatch.call('change'); }, 1000),
var throttledRedraw = _.throttle(function () { dispatch.call('change'); }, 1000),
minZoom = 12,
layer = d3.select(null),
_mapillary;
@@ -21,7 +20,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
function getMapillary() {
if (services.mapillary && !_mapillary) {
_mapillary = services.mapillary;
_mapillary.event.on('loadedSigns', debouncedRedraw);
_mapillary.event.on('loadedSigns', throttledRedraw);
} else if (!services.mapillary && _mapillary) {
_mapillary = null;
}
@@ -31,12 +30,11 @@ export function svgMapillarySigns(projection, context, dispatch) {
function showLayer() {
editOn();
debouncedRedraw();
}
function hideLayer() {
debouncedRedraw.cancel();
throttledRedraw.cancel();
editOff();
}
@@ -67,7 +65,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
function update() {
var mapillary = getMapillary(),
data = (mapillary ? mapillary.signs(projection, utilGetDimensions(layer)) : []),
data = (mapillary ? mapillary.signs(projection) : []),
imageKey = mapillary ? mapillary.selectedImage() : null;
var signs = layer.selectAll('.icon-sign')
@@ -116,7 +114,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
if (mapillary && ~~context.map().zoom() >= minZoom) {
editOn();
update();
mapillary.loadSigns(context, projection, utilGetDimensions(layer));
mapillary.loadSigns(context, projection);
} else {
editOff();
}
@@ -143,12 +141,6 @@ export function svgMapillarySigns(projection, context, dispatch) {
};
drawSigns.dimensions = function(_) {
if (!arguments.length) return utilGetDimensions(layer);
utilSetDimensions(layer, _);
return this;
};
init();
return drawSigns;
}
+15 -13
View File
@@ -8,8 +8,10 @@ describe('iD.serviceMapillary', function() {
beforeEach(function() {
context = iD.Context(window).assetPath('../dist/');
context.projection.scale(667544.214430109); // z14
context.projection.translate([-116508, 0]); // 10,0
context.projection
.scale(667544.214430109) // z14
.translate([-116508, 0]) // 10,0
.clipExtent([[0,0], dimensions]);
server = sinon.fakeServer.create();
mapillary = iD.services.mapillary;
@@ -66,7 +68,7 @@ describe('iD.serviceMapillary', function() {
it('fires loadedImages when images are loaded', function() {
var spy = sinon.spy();
mapillary.on('loadedImages', spy);
mapillary.loadImages(context.projection, dimensions);
mapillary.loadImages(context.projection);
var match = /search\/im\/geojson/,
features = [{
@@ -87,7 +89,7 @@ describe('iD.serviceMapillary', function() {
var spy = sinon.spy();
context.projection.translate([0,0]);
mapillary.on('loadedImages', spy);
mapillary.loadImages(context.projection, dimensions);
mapillary.loadImages(context.projection);
var match = /search\/im\/geojson/,
features = [{
@@ -107,7 +109,7 @@ describe('iD.serviceMapillary', function() {
it.skip('loads multiple pages of image results', function() {
var spy = sinon.spy();
mapillary.on('loadedImages', spy);
mapillary.loadImages(context.projection, dimensions);
mapillary.loadImages(context.projection);
var features0 = [],
features1 = [],
@@ -145,7 +147,7 @@ describe('iD.serviceMapillary', function() {
describe('#loadSigns', function() {
it('loads sign_defs', function() {
mapillary.loadSigns(context, context.projection, dimensions);
mapillary.loadSigns(context, context.projection);
var base = 'regulatory--maximum-speed-limit-65--',
match = /traffico\/string-maps\/(\w+)-map.json/;
@@ -178,7 +180,7 @@ describe('iD.serviceMapillary', function() {
it('fires loadedSigns when signs are loaded', function() {
var spy = sinon.spy();
mapillary.on('loadedSigns', spy);
mapillary.loadSigns(context, context.projection, dimensions);
mapillary.loadSigns(context, context.projection);
var match = /search\/im\/geojson\/or/,
rects = [{
@@ -206,7 +208,7 @@ describe('iD.serviceMapillary', function() {
var spy = sinon.spy();
context.projection.translate([0,0]);
mapillary.on('loadedSigns', spy);
mapillary.loadSigns(context, context.projection, dimensions);
mapillary.loadSigns(context, context.projection);
var match = /search\/im\/geojson\/or/,
rects = [{
@@ -233,7 +235,7 @@ describe('iD.serviceMapillary', function() {
it.skip('loads multiple pages of signs results', function() {
var spy = sinon.spy();
mapillary.on('loadedSigns', spy);
mapillary.loadSigns(context, context.projection, dimensions);
mapillary.loadSigns(context, context.projection);
var rects = [{
'package': 'trafficsign_us_3.0',
@@ -286,7 +288,7 @@ describe('iD.serviceMapillary', function() {
];
mapillary.cache().images.rtree.load(features);
var res = mapillary.images(context.projection, dimensions);
var res = mapillary.images(context.projection);
expect(res).to.deep.eql([
{ key: '0', loc: [10,0], ca: 90 },
@@ -304,7 +306,7 @@ describe('iD.serviceMapillary', function() {
];
mapillary.cache().images.rtree.load(features);
var res = mapillary.images(context.projection, dimensions);
var res = mapillary.images(context.projection);
expect(res).to.have.length.of.at.most(3);
});
});
@@ -325,7 +327,7 @@ describe('iD.serviceMapillary', function() {
];
mapillary.cache().signs.rtree.load(features);
var res = mapillary.signs(context.projection, dimensions);
var res = mapillary.signs(context.projection);
expect(res).to.deep.eql([
{ key: '0', loc: [10,0], signs: signs },
@@ -350,7 +352,7 @@ describe('iD.serviceMapillary', function() {
];
mapillary.cache().signs.rtree.load(features);
var res = mapillary.signs(context.projection, dimensions);
var res = mapillary.signs(context.projection);
expect(res).to.have.length.of.at.most(3);
});
});