4
0

clientlayer.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. define(["leaflet"],
  2. function (L) {
  3. return L.TileLayer.Canvas.extend({
  4. setData: function (d) {
  5. this.data = d
  6. this.redraw()
  7. },
  8. drawTile: function (canvas, tilePoint) {
  9. function getTileBBox(s, map, tileSize, margin) {
  10. var tl = map.unproject([s.x - margin, s.y - margin])
  11. var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
  12. return [br.lat, tl.lng, tl.lat, br.lng]
  13. }
  14. if (!this.data)
  15. return
  16. var tileSize = this.options.tileSize
  17. var s = tilePoint.multiplyBy(tileSize)
  18. var map = this._map
  19. var margin = 50
  20. var bbox = getTileBBox(s, map, tileSize, margin)
  21. var nodes = this.data.search(bbox)
  22. if (nodes.length === 0)
  23. return
  24. var ctx = canvas.getContext("2d")
  25. var radius = 3
  26. var a = 1.2
  27. var startDistance = 12
  28. var startAngle = Math.PI
  29. ctx.beginPath()
  30. nodes.forEach(function (d) {
  31. var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
  32. var clients = d.node.statistics.clients
  33. if (clients === 0)
  34. return
  35. p.x -= s.x
  36. p.y -= s.y
  37. var distance = startDistance
  38. var angle = startAngle
  39. for (var i = 0; i < clients; i++) {
  40. if ((angle - startAngle) > 2 * Math.PI) {
  41. angle = startAngle
  42. distance += 2 * radius * a
  43. }
  44. var x = p.x + distance * Math.cos(angle)
  45. var y = p.y + distance * Math.sin(angle)
  46. ctx.moveTo(x, y)
  47. ctx.arc(x, y, radius, 0, 2 * Math.PI)
  48. var n = Math.floor((Math.PI * distance) / (a * radius))
  49. var angleDelta = 2 * Math.PI / n
  50. angle += angleDelta
  51. }
  52. })
  53. ctx.fillStyle = "rgba(153, 118, 16, 0.5)"
  54. ctx.fill()
  55. }
  56. })
  57. })