|
1
|
|
|
define(['leaflet', 'rbush', 'helper'], |
|
2
|
|
|
function (L, rbush, helper) { |
|
3
|
|
|
'use strict'; |
|
4
|
|
|
|
|
5
|
|
|
return L.GridLayer.extend({ |
|
6
|
|
|
mapRTree: function mapRTree(d) { |
|
7
|
|
|
return { |
|
8
|
|
|
minX: d.nodeinfo.location.latitude, minY: d.nodeinfo.location.longitude, |
|
9
|
|
|
maxX: d.nodeinfo.location.latitude, maxY: d.nodeinfo.location.longitude, |
|
10
|
|
|
node: d |
|
11
|
|
|
}; |
|
12
|
|
|
}, |
|
13
|
|
|
setData: function (data) { |
|
14
|
|
|
var rtreeOnlineAll = rbush(9); |
|
15
|
|
|
|
|
16
|
|
|
this.data = rtreeOnlineAll.load(data.nodes.all.filter(helper.online).filter(helper.hasLocation).map(this.mapRTree)); |
|
17
|
|
|
|
|
18
|
|
|
// pre-calculate start angles |
|
19
|
|
|
this.data.all().forEach(function (n) { |
|
20
|
|
|
n.startAngle = (parseInt(n.node.nodeinfo.node_id.substr(10, 2), 16) / 255) * 2 * Math.PI; |
|
21
|
|
|
}); |
|
22
|
|
|
this.redraw(); |
|
23
|
|
|
}, |
|
24
|
|
|
createTile: function (tilePoint) { |
|
25
|
|
|
var tile = L.DomUtil.create('canvas', 'leaflet-tile'); |
|
26
|
|
|
|
|
27
|
|
|
var tileSize = this.options.tileSize; |
|
28
|
|
|
tile.width = tileSize; |
|
29
|
|
|
tile.height = tileSize; |
|
30
|
|
|
|
|
31
|
|
|
if (!this.data) { |
|
32
|
|
|
return tile; |
|
33
|
|
|
} |
|
34
|
|
|
|
|
35
|
|
|
var ctx = tile.getContext('2d'); |
|
36
|
|
|
var s = tilePoint.multiplyBy(tileSize); |
|
37
|
|
|
var map = this._map; |
|
38
|
|
|
|
|
39
|
|
|
var margin = 50; |
|
40
|
|
|
var bbox = helper.getTileBBox(s, map, tileSize, margin); |
|
41
|
|
|
|
|
42
|
|
|
var nodes = this.data.search(bbox); |
|
43
|
|
|
|
|
44
|
|
|
if (nodes.length === 0) { |
|
45
|
|
|
return tile; |
|
46
|
|
|
} |
|
47
|
|
|
|
|
48
|
|
|
var startDistance = 12; |
|
49
|
|
|
|
|
50
|
|
|
ctx.beginPath(); |
|
51
|
|
|
nodes.forEach(function (d) { |
|
52
|
|
|
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]); |
|
53
|
|
|
|
|
54
|
|
|
p.x -= s.x; |
|
55
|
|
|
p.y -= s.y; |
|
56
|
|
|
|
|
57
|
|
|
helper.positionClients(ctx, p, d.startAngle, d.node.statistics.clients, startDistance); |
|
58
|
|
|
}); |
|
59
|
|
|
|
|
60
|
|
|
ctx.fillStyle = 'rgba(220, 0, 103, 0.7)'; |
|
61
|
|
|
ctx.fill(); |
|
62
|
|
|
|
|
63
|
|
|
return tile; |
|
64
|
|
|
} |
|
65
|
|
|
}); |
|
66
|
|
|
}); |
|
67
|
|
|
|