[TASK] Use helper for duplicate position clients
This commit is contained in:
parent
d2090225c5
commit
56a6617b7e
@ -396,31 +396,9 @@ define(['d3', 'helper'], function (d3, helper) {
|
|||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
if (scale > 0.9) {
|
if (scale > 0.9) {
|
||||||
|
var startDistance = 16;
|
||||||
nodes.filter(visibleNodes).forEach(function (d) {
|
nodes.filter(visibleNodes).forEach(function (d) {
|
||||||
var clients = d.o.node.statistics.clients;
|
helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, startDistance);
|
||||||
if (clients === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var startDistance = 16;
|
|
||||||
var radius = 3;
|
|
||||||
var a = 1.2;
|
|
||||||
var startAngle = Math.PI;
|
|
||||||
|
|
||||||
for (var orbit = 0, i = 0; i < clients; orbit++) {
|
|
||||||
var di = startDistance + orbit * 2 * radius * a;
|
|
||||||
var n = Math.floor((Math.PI * di) / (a * radius));
|
|
||||||
var delta = clients - i;
|
|
||||||
|
|
||||||
for (var j = 0; j < Math.min(delta, n); i++, j++) {
|
|
||||||
var angle = 2 * Math.PI / n * j;
|
|
||||||
var x = d.x + di * Math.cos(angle + startAngle);
|
|
||||||
var y = d.y + di * Math.sin(angle + startAngle);
|
|
||||||
|
|
||||||
ctx.moveTo(x, y);
|
|
||||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
ctx.fillStyle = clientColor;
|
ctx.fillStyle = clientColor;
|
||||||
|
@ -32,36 +32,17 @@ define(['leaflet', 'helper'],
|
|||||||
|
|
||||||
var ctx = canvas.getContext('2d');
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
var radius = 3;
|
|
||||||
var a = 1.2;
|
|
||||||
var startDistance = 12;
|
var startDistance = 12;
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
nodes.forEach(function (d) {
|
nodes.forEach(function (d) {
|
||||||
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]);
|
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]);
|
||||||
var clients = d.node.statistics.clients;
|
|
||||||
|
|
||||||
if (clients === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.x -= s.x;
|
p.x -= s.x;
|
||||||
p.y -= s.y;
|
p.y -= s.y;
|
||||||
|
|
||||||
for (var orbit = 0, i = 0; i < clients; orbit++) {
|
helper.positionClients(ctx, p, d.startAngle, d.node.statistics.clients, startDistance);
|
||||||
var distance = startDistance + orbit * 2 * radius * a;
|
|
||||||
var n = Math.floor((Math.PI * distance) / (a * radius));
|
|
||||||
var delta = clients - i;
|
|
||||||
|
|
||||||
for (var j = 0; j < Math.min(delta, n); i++, j++) {
|
|
||||||
var angle = 2 * Math.PI / n * j;
|
|
||||||
var x = p.x + distance * Math.cos(angle + d.startAngle);
|
|
||||||
var y = p.y + distance * Math.sin(angle + d.startAngle);
|
|
||||||
|
|
||||||
ctx.moveTo(x, y);
|
|
||||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
ctx.fillStyle = 'rgba(220, 0, 103, 0.7)';
|
ctx.fillStyle = 'rgba(220, 0, 103, 0.7)';
|
||||||
|
@ -195,5 +195,28 @@ define({
|
|||||||
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
|
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
|
||||||
|
|
||||||
return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng };
|
return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng };
|
||||||
|
},
|
||||||
|
positionClients: function positionClients(ctx, p, startAngle, clients, startDistance) {
|
||||||
|
if (clients === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var radius = 3;
|
||||||
|
var a = 1.2;
|
||||||
|
|
||||||
|
for (var orbit = 0, i = 0; i < clients; orbit++) {
|
||||||
|
var distance = startDistance + orbit * 2 * radius * a;
|
||||||
|
var n = Math.floor((Math.PI * distance) / (a * radius));
|
||||||
|
var delta = clients - i;
|
||||||
|
|
||||||
|
for (var j = 0; j < Math.min(delta, n); i++, j++) {
|
||||||
|
var angle = 2 * Math.PI / n * j;
|
||||||
|
var x = p.x + distance * Math.cos(angle + startAngle);
|
||||||
|
var y = p.y + distance * Math.sin(angle + startAngle);
|
||||||
|
|
||||||
|
ctx.moveTo(x, y);
|
||||||
|
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user