mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-16 13:59:27 +02:00
Move rtrees to Mapillary service, DRY code, set minZoom to 12
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
iD.MapillaryImageLayer = function(context) {
|
||||
var mapillary = iD.services.mapillary(),
|
||||
debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000),
|
||||
rtree = rbush(),
|
||||
enabled = false,
|
||||
minZoom = 12,
|
||||
layer;
|
||||
|
||||
|
||||
@@ -23,8 +23,8 @@ iD.MapillaryImageLayer = function(context) {
|
||||
}
|
||||
|
||||
function showLayer() {
|
||||
editOn();
|
||||
layer
|
||||
.style('display', 'block')
|
||||
.style('opacity', 0)
|
||||
.transition()
|
||||
.duration(500)
|
||||
@@ -39,12 +39,16 @@ iD.MapillaryImageLayer = function(context) {
|
||||
.transition()
|
||||
.duration(500)
|
||||
.style('opacity', 0)
|
||||
.each('end', function() {
|
||||
layer
|
||||
.style('display', 'none')
|
||||
.selectAll('.viewfield-group')
|
||||
.remove();
|
||||
});
|
||||
.each('end', editOff);
|
||||
}
|
||||
|
||||
function editOn() {
|
||||
layer.style('display', 'block');
|
||||
}
|
||||
|
||||
function editOff() {
|
||||
layer.selectAll('.viewfield-group').remove();
|
||||
layer.style('display', 'none');
|
||||
}
|
||||
|
||||
function transform(d) {
|
||||
@@ -53,30 +57,8 @@ iD.MapillaryImageLayer = function(context) {
|
||||
return t;
|
||||
}
|
||||
|
||||
function imagesLoaded(data) {
|
||||
if (!data.features.length) return;
|
||||
|
||||
var images = [],
|
||||
image, loc;
|
||||
|
||||
for (var i = 0; i < data.features.length; i++) {
|
||||
image = data.features[i];
|
||||
loc = image.geometry.coordinates;
|
||||
images.push([loc[0], loc[1], loc[0], loc[1], {
|
||||
key: image.properties.key,
|
||||
ca: image.properties.ca,
|
||||
loc: loc
|
||||
}]);
|
||||
}
|
||||
|
||||
rtree.load(images);
|
||||
debouncedRedraw();
|
||||
}
|
||||
|
||||
function drawMarkers() {
|
||||
var data = rtree
|
||||
.search(context.map().extent().rectangle())
|
||||
.map(function(d) { return d[4]; });
|
||||
var data = mapillary.images(context.map().extent());
|
||||
|
||||
var markers = layer.selectAll('.viewfield-group')
|
||||
.data(data, function(d) { return d.key; });
|
||||
@@ -105,7 +87,6 @@ iD.MapillaryImageLayer = function(context) {
|
||||
.remove();
|
||||
}
|
||||
|
||||
|
||||
function render(selection) {
|
||||
layer = selection.selectAll('svg')
|
||||
.data([0]);
|
||||
@@ -137,8 +118,13 @@ iD.MapillaryImageLayer = function(context) {
|
||||
});
|
||||
|
||||
if (enabled) {
|
||||
drawMarkers();
|
||||
mapillary.loadImages(context.projection, layer.dimensions());
|
||||
if (~~context.map().zoom() < minZoom) {
|
||||
editOff();
|
||||
} else {
|
||||
editOn();
|
||||
drawMarkers();
|
||||
mapillary.loadImages(context.projection, layer.dimensions());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,7 +147,7 @@ iD.MapillaryImageLayer = function(context) {
|
||||
|
||||
|
||||
mapillary
|
||||
.on('loadedImages', imagesLoaded);
|
||||
.on('loadedImages', debouncedRedraw);
|
||||
|
||||
return render;
|
||||
};
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
iD.MapillarySignLayer = function(context) {
|
||||
var mapillary = iD.services.mapillary(),
|
||||
debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000),
|
||||
rtree = rbush(),
|
||||
enabled = false,
|
||||
minZoom = 12,
|
||||
layer;
|
||||
|
||||
|
||||
@@ -23,41 +23,27 @@ iD.MapillarySignLayer = function(context) {
|
||||
}
|
||||
|
||||
function showLayer() {
|
||||
layer.style('display', 'block');
|
||||
editOn();
|
||||
debouncedRedraw();
|
||||
}
|
||||
|
||||
function hideLayer() {
|
||||
debouncedRedraw.cancel();
|
||||
hideThumbnail();
|
||||
editOff();
|
||||
}
|
||||
|
||||
function editOn() {
|
||||
layer.style('display', 'block');
|
||||
}
|
||||
|
||||
function editOff() {
|
||||
layer.selectAll('.icon-sign').remove();
|
||||
layer.style('display', 'none');
|
||||
}
|
||||
|
||||
function signsLoaded(data) {
|
||||
if (!data.features.length) return;
|
||||
|
||||
var signs = [],
|
||||
sign, loc;
|
||||
|
||||
for (var i = 0; i < data.features.length; i++) {
|
||||
sign = data.features[i];
|
||||
loc = sign.geometry.coordinates;
|
||||
signs.push([loc[0], loc[1], loc[0], loc[1], {
|
||||
key: sign.properties.key,
|
||||
signs: sign.properties.rects,
|
||||
loc: loc
|
||||
}]);
|
||||
}
|
||||
|
||||
rtree.load(signs);
|
||||
debouncedRedraw();
|
||||
}
|
||||
|
||||
function drawSigns() {
|
||||
var data = rtree
|
||||
.search(context.map().extent().rectangle())
|
||||
.map(function(d) { return d[4]; });
|
||||
var data = mapillary.signs(context.map().extent());
|
||||
|
||||
var signs = layer.select('.mapillary-sign-offset')
|
||||
.selectAll('.icon-sign')
|
||||
@@ -117,8 +103,13 @@ iD.MapillarySignLayer = function(context) {
|
||||
.attr('transform', 'translate(-16, -16)'); // center signs on loc
|
||||
|
||||
if (enabled) {
|
||||
drawSigns();
|
||||
mapillary.loadSigns(context, context.projection, layer.dimensions());
|
||||
if (~~context.map().zoom() < minZoom) {
|
||||
hideLayer();
|
||||
} else {
|
||||
layer.style('display', 'block');
|
||||
drawSigns();
|
||||
mapillary.loadSigns(context, context.projection, layer.dimensions());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,7 +132,7 @@ iD.MapillarySignLayer = function(context) {
|
||||
|
||||
|
||||
mapillary
|
||||
.on('loadedSigns', signsLoaded);
|
||||
.on('loadedSigns', debouncedRedraw);
|
||||
|
||||
return render;
|
||||
};
|
||||
|
||||
+41
-21
@@ -57,7 +57,7 @@ iD.services.mapillary = function() {
|
||||
var tiles = getTiles(projection, dimensions);
|
||||
|
||||
_.filter(which.inflight, function(v, k) {
|
||||
var wanted = _.find(tiles, function(tile) { return k === tile.id; });
|
||||
var wanted = _.find(tiles, function(tile) { return k === (tile.id + ',0'); });
|
||||
if (!wanted) delete which.inflight[k];
|
||||
return !wanted;
|
||||
}).map(abortRequest);
|
||||
@@ -68,13 +68,13 @@ iD.services.mapillary = function() {
|
||||
}
|
||||
|
||||
function loadTilePage(which, url, tile, page) {
|
||||
var cache = iD.services.mapillary.cache,
|
||||
var cache = iD.services.mapillary.cache[which],
|
||||
id = tile.id + ',' + String(page),
|
||||
rect = tile.extent.rectangle();
|
||||
|
||||
if (which.loaded[id] || which.inflight[id]) return;
|
||||
if (cache.loaded[id] || cache.inflight[id]) return;
|
||||
|
||||
which.inflight[id] = d3.json(url +
|
||||
cache.inflight[id] = d3.json(url +
|
||||
iD.util.qsString({
|
||||
geojson: 'true',
|
||||
limit: maxResults,
|
||||
@@ -85,16 +85,28 @@ iD.services.mapillary = function() {
|
||||
max_lon: rect[2],
|
||||
max_lat: rect[3]
|
||||
}), function(err, data) {
|
||||
which.loaded[id] = true;
|
||||
delete which.inflight[id];
|
||||
if (err) return;
|
||||
cache.loaded[id] = true;
|
||||
delete cache.inflight[id];
|
||||
if (err || !data.features || !data.features.length) return;
|
||||
|
||||
if (which === cache.images) {
|
||||
dispatch.loadedImages(data);
|
||||
} else if (which === cache.signs) {
|
||||
dispatch.loadedSigns(data);
|
||||
var features = [],
|
||||
feature, loc, d;
|
||||
|
||||
for (var i = 0; i < data.features.length; i++) {
|
||||
feature = data.features[i];
|
||||
loc = feature.geometry.coordinates;
|
||||
d = { key: feature.properties.key, loc: loc };
|
||||
if (which === 'images') d.ca = feature.properties.ca;
|
||||
if (which === 'signs') d.signs = feature.properties.rects;
|
||||
|
||||
features.push([loc[0], loc[1], loc[0], loc[1], d]);
|
||||
}
|
||||
|
||||
cache.rtree.load(features);
|
||||
|
||||
if (which === 'images') dispatch.loadedImages();
|
||||
if (which === 'signs') dispatch.loadedSigns();
|
||||
|
||||
if (data.features.length === maxResults) {
|
||||
loadTilePage(which, url, tile, ++page);
|
||||
}
|
||||
@@ -103,17 +115,26 @@ iD.services.mapillary = function() {
|
||||
}
|
||||
|
||||
mapillary.loadImages = function(projection, dimensions) {
|
||||
var cache = iD.services.mapillary.cache,
|
||||
url = apibase + 'search/im/geojson?';
|
||||
loadTiles(cache.images, url, projection, dimensions);
|
||||
var url = apibase + 'search/im/geojson?';
|
||||
loadTiles('images', url, projection, dimensions);
|
||||
};
|
||||
|
||||
mapillary.loadSigns = function(context, projection, dimensions) {
|
||||
var cache = iD.services.mapillary.cache,
|
||||
url = apibase + 'search/im/geojson/or?';
|
||||
|
||||
var url = apibase + 'search/im/geojson/or?';
|
||||
loadSignDefs(context);
|
||||
loadTiles(cache.signs, url, projection, dimensions);
|
||||
loadTiles('signs', url, projection, dimensions);
|
||||
};
|
||||
|
||||
mapillary.images = function(extent) {
|
||||
return iD.services.mapillary.cache.images.rtree
|
||||
.search(extent.rectangle())
|
||||
.map(function(d) { return d[4]; });
|
||||
};
|
||||
|
||||
mapillary.signs = function(extent) {
|
||||
return iD.services.mapillary.cache.signs.rtree
|
||||
.search(extent.rectangle())
|
||||
.map(function(d) { return d[4]; });
|
||||
};
|
||||
|
||||
mapillary.signHTML = function(d) {
|
||||
@@ -188,8 +209,8 @@ iD.services.mapillary = function() {
|
||||
}
|
||||
|
||||
iD.services.mapillary.cache = {
|
||||
images: { inflight: {}, loaded: {}, rbush: rbush() },
|
||||
signs: { inflight: {}, loaded: {}, rbush: rbush() }
|
||||
images: { inflight: {}, loaded: {}, rtree: rbush() },
|
||||
signs: { inflight: {}, loaded: {}, rtree: rbush() }
|
||||
};
|
||||
|
||||
iD.services.mapillary.thumb = null;
|
||||
@@ -204,4 +225,3 @@ iD.services.mapillary = function() {
|
||||
|
||||
return d3.rebind(mapillary, dispatch, 'on');
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user