map: draw only labels present on map using rtrees

This commit is contained in:
Nils Schneider 2015-04-19 12:22:09 +02:00
parent 9d2318dce1
commit 22b49c1a55
5 changed files with 100 additions and 67 deletions

View file

@ -6,6 +6,13 @@ define(["leaflet"],
this.redraw()
},
drawTile: function (canvas, tilePoint) {
function getTileBBox(s, map, tileSize, margin) {
var tl = map.unproject([s.x - margin, s.y - margin])
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
return [br.lat, tl.lng, tl.lat, br.lng]
}
if (!this.data)
return
@ -13,41 +20,34 @@ define(["leaflet"],
var s = tilePoint.multiplyBy(tileSize)
var map = this._map
function project(coords) {
var p = map.project(new L.LatLng(coords[0], coords[1]))
return {x: p.x - s.x, y: p.y - s.y}
}
function projectNodes(d) {
return { p: project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]),
o: d
}
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
p.x -= s.x
p.y -= s.y
return {p: p, o: d.node}
}
var margin = 150
function onTile(d) {
return d.p.x + margin > 0 ||
d.p.y + margin > 0 ||
d.p.x - tileSize - margin < 0 ||
d.p.y - tileSize - margin < 0
}
var margin = 256
var bbox = getTileBBox(s, map, tileSize, margin)
var nodesOnline = this.data.online.search(bbox).map(projectNodes)
var nodesOffline = this.data.offline.search(bbox).map(projectNodes)
var nodesNew = this.data.new.search(bbox).map(projectNodes)
var nodesLost = this.data.lost.search(bbox).map(projectNodes)
var ctx = canvas.getContext("2d")
var nodesOnline = this.data.online.map(projectNodes).filter(onTile)
var nodesOffline = this.data.offline.map(projectNodes).filter(onTile)
var nodesNew = this.data.new.map(projectNodes).filter(onTile)
var nodesLost = this.data.lost.map(projectNodes).filter(onTile)
var distance = 10
ctx.font = "12px Roboto"
ctx.textBaseline = "middle"
ctx.textAlign = "left"
ctx.lineWidth = 2.5
var distance = 10
function drawLabel(d) {
ctx.strokeText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
ctx.fillText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
ctx.strokeText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
ctx.fillText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
}
ctx.fillStyle = "rgba(212, 62, 42, 0.6)"