map: draw only labels present on map using rtrees
This commit is contained in:
parent
9d2318dce1
commit
22b49c1a55
5 changed files with 100 additions and 67 deletions
lib/map
|
@ -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,51 +20,54 @@ 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}
|
||||
}
|
||||
|
||||
var nodes = this.data
|
||||
var ctx = canvas.getContext("2d")
|
||||
var margin = 50
|
||||
var bbox = getTileBBox(s, map, tileSize, margin)
|
||||
|
||||
var nodes = this.data.search(bbox)
|
||||
|
||||
if (nodes.length === 0)
|
||||
return
|
||||
|
||||
var ctx = canvas.getContext("2d")
|
||||
|
||||
var distance = 12
|
||||
var radius = 3
|
||||
var a = 1.2
|
||||
var startAngle = Math.PI
|
||||
|
||||
ctx.beginPath()
|
||||
nodes.forEach(function (d) {
|
||||
var p = project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude])
|
||||
if (p.x + margin < 0 || p.y + margin < 0 || p.x - tileSize - margin > 0 || p.y - tileSize - margin > 0)
|
||||
return
|
||||
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
|
||||
var clients = d.node.statistics.clients
|
||||
|
||||
var clients = d.statistics.clients
|
||||
if (d.clients === 0)
|
||||
return
|
||||
if (clients === 0)
|
||||
return
|
||||
|
||||
var distance = 12
|
||||
var radius = 3
|
||||
var a = 1.2
|
||||
var startAngle = Math.PI
|
||||
var angle = startAngle
|
||||
p.x -= s.x
|
||||
p.y -= s.y
|
||||
|
||||
for (var i = 0; i < clients; i++) {
|
||||
if ((angle - startAngle) > 2 * Math.PI) {
|
||||
angle = startAngle
|
||||
distance += 2 * radius * a
|
||||
}
|
||||
var angle = startAngle
|
||||
|
||||
var x = p.x + distance * Math.cos(angle)
|
||||
var y = p.y + distance * Math.sin(angle)
|
||||
|
||||
ctx.moveTo(x, y)
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI)
|
||||
|
||||
var n = Math.floor((Math.PI * distance) / (a * radius))
|
||||
var angleDelta = 2 * Math.PI / n
|
||||
angle += angleDelta
|
||||
for (var i = 0; i < clients; i++) {
|
||||
if ((angle - startAngle) > 2 * Math.PI) {
|
||||
angle = startAngle
|
||||
distance += 2 * radius * a
|
||||
}
|
||||
})
|
||||
|
||||
ctx.fillStyle = "rgba(153, 118, 16, 0.5)"
|
||||
ctx.fill()
|
||||
}
|
||||
var x = p.x + distance * Math.cos(angle)
|
||||
var y = p.y + distance * Math.sin(angle)
|
||||
|
||||
ctx.moveTo(x, y)
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI)
|
||||
|
||||
var n = Math.floor((Math.PI * distance) / (a * radius))
|
||||
var angleDelta = 2 * Math.PI / n
|
||||
angle += angleDelta
|
||||
}
|
||||
})
|
||||
|
||||
ctx.fillStyle = "rgba(153, 118, 16, 0.5)"
|
||||
ctx.fill()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue