4
0

labelslayer.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. define(["leaflet", "rbush"],
  2. function (L, rbush) {
  3. var labelLocations = [["left", "middle", 0 / 8],
  4. ["center", "top", 6 / 8],
  5. ["right", "middle", 4 / 8],
  6. ["left", "top", 7 / 8],
  7. ["left", "ideographic", 1 / 8],
  8. ["right", "top", 5 / 8],
  9. ["center", "ideographic", 2 / 8],
  10. ["right", "ideographic", 3 / 8]]
  11. var fontFamily = "Roboto"
  12. var nodeRadius = 4
  13. var ctx = document.createElement("canvas").getContext("2d")
  14. function measureText(font, text) {
  15. ctx.font = font
  16. return ctx.measureText(text)
  17. }
  18. function mapRTree(d) {
  19. var o = [d.position.lat, d.position.lng, d.position.lat, d.position.lng]
  20. o.label = d
  21. return o
  22. }
  23. function prepareLabel(fillStyle, fontSize, offset, stroke, minZoom) {
  24. return function (d) {
  25. var font = fontSize + "px " + fontFamily
  26. return { position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
  27. label: d.nodeinfo.hostname,
  28. offset: offset,
  29. fillStyle: fillStyle,
  30. height: fontSize * 1.2,
  31. font: font,
  32. stroke: stroke,
  33. minZoom: minZoom,
  34. width: measureText(font, d.nodeinfo.hostname).width
  35. }
  36. }
  37. }
  38. function calcOffset(offset, loc) {
  39. return [ offset * Math.cos(loc[2] * 2 * Math.PI),
  40. -offset * Math.sin(loc[2] * 2 * Math.PI)]
  41. }
  42. function labelRect(p, offset, anchor, label) {
  43. var dx = { left: 0,
  44. right: -label.width,
  45. center: -label.width / 2
  46. }
  47. var dy = { top: 0,
  48. ideographic: -label.height,
  49. middle: -label.height / 2
  50. }
  51. var x = p.x + offset[0] + dx[anchor[0]]
  52. var y = p.y + offset[1] + dy[anchor[1]]
  53. return [x, y, x + label.width, y + label.height]
  54. }
  55. var c = L.TileLayer.Canvas.extend({
  56. onAdd: function (map) {
  57. L.TileLayer.Canvas.prototype.onAdd.call(this, map)
  58. if (this.data)
  59. this.prepareLabels()
  60. },
  61. setData: function (d) {
  62. this.data = d
  63. if (this._map)
  64. this.prepareLabels()
  65. },
  66. prepareLabels: function () {
  67. var d = this.data
  68. // label:
  69. // - position (WGS84 coords)
  70. // - offset (2D vector in pixels)
  71. // - anchor (tuple, textAlignment, textBaseline)
  72. // - minZoom (inclusive)
  73. // - label (string)
  74. // - color (string)
  75. var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13))
  76. var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16))
  77. var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0))
  78. var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0))
  79. var labels = []
  80. .concat(labelsNew)
  81. .concat(labelsLost)
  82. .concat(labelsOnline)
  83. .concat(labelsOffline)
  84. var minZoom = this.options.minZoom
  85. var maxZoom = this.options.maxZoom
  86. var trees = []
  87. var map = this._map
  88. function nodeToRect(z) {
  89. return function (d) {
  90. var p = map.project(d.position, z)
  91. return [p.x - nodeRadius, p.y - nodeRadius,
  92. p.x + nodeRadius, p.y + nodeRadius]
  93. }
  94. }
  95. for (var z = minZoom; z <= maxZoom; z++) {
  96. trees[z] = rbush(9)
  97. trees[z].load(labels.map(nodeToRect(z)))
  98. }
  99. labels = labels.map(function (d) {
  100. var best = labelLocations.map(function (loc) {
  101. var offset = calcOffset(d.offset, loc)
  102. var z
  103. for (z = maxZoom; z >= d.minZoom; z--) {
  104. var p = map.project(d.position, z)
  105. var rect = labelRect(p, offset, loc, d)
  106. var candidates = trees[z].search(rect)
  107. if (candidates.length > 0)
  108. break
  109. }
  110. return {loc: loc, z: z + 1}
  111. }).filter(function (d) {
  112. return d.z <= maxZoom
  113. }).sort(function (a, b) {
  114. return a.z - b.z
  115. })[0]
  116. if (best !== undefined) {
  117. d.offset = calcOffset(d.offset, best.loc)
  118. d.minZoom = best.z
  119. d.anchor = best.loc
  120. for (var z = maxZoom; z >= best.z; z--) {
  121. var p = map.project(d.position, z)
  122. var rect = labelRect(p, d.offset, best.loc, d)
  123. trees[z].insert(rect)
  124. }
  125. return d
  126. } else
  127. return undefined
  128. }).filter(function (d) { return d !== undefined })
  129. this.margin = 16 + labels.map(function (d) {
  130. return d.width
  131. }).sort().reverse()[0]
  132. this.labels = rbush(9)
  133. this.labels.load(labels.map(mapRTree))
  134. this.redraw()
  135. },
  136. drawTile: function (canvas, tilePoint, zoom) {
  137. function getTileBBox(s, map, tileSize, margin) {
  138. var tl = map.unproject([s.x - margin, s.y - margin])
  139. var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
  140. return [br.lat, tl.lng, tl.lat, br.lng]
  141. }
  142. if (!this.labels)
  143. return
  144. var tileSize = this.options.tileSize
  145. var s = tilePoint.multiplyBy(tileSize)
  146. var map = this._map
  147. function projectNodes(d) {
  148. var p = map.project(d.label.position)
  149. p.x -= s.x
  150. p.y -= s.y
  151. return {p: p, label: d.label}
  152. }
  153. var bbox = getTileBBox(s, map, tileSize, this.margin)
  154. var labels = this.labels.search(bbox).map(projectNodes)
  155. var ctx = canvas.getContext("2d")
  156. ctx.lineWidth = 5
  157. ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
  158. ctx.miterLimit = 2
  159. function drawLabel(d) {
  160. ctx.font = d.label.font
  161. ctx.textAlign = d.label.anchor[0]
  162. ctx.textBaseline = d.label.anchor[1]
  163. ctx.fillStyle = d.label.fillStyle
  164. if (d.label.stroke)
  165. ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
  166. ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
  167. }
  168. labels.filter(function (d) {
  169. return zoom >= d.label.minZoom
  170. }).forEach(drawLabel)
  171. }
  172. })
  173. return c
  174. })