You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

D3SvgOverlay.js 3.0KB

7 mesi fa
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /**
  2. * T.D3Overlay借助D3.js强大的可视化功能,扩展天地图已有的覆盖物类 T.Overlay,
  3. * 使天地图表达的可视化信息,不仅仅只有地理数据展示,也可以结合更丰富的图形(柱图,饼图)来描述、展现数据。
  4. * 注:chrome、safari、IE9及以上浏览器。
  5. */
  6. T.D3Overlay = T.Overlay.extend({
  7. initialize: function (init, redraw, options) {
  8. this.uid = new Date().getTime();
  9. this.init = init;
  10. this.redraw = redraw;
  11. if (options)
  12. this.options = options;
  13. d3.select("head")
  14. .append("style").attr("type", "text/css")
  15. },
  16. /**
  17. * 地图缩放触发的函数
  18. * @private
  19. */
  20. _zoomChange: function () {
  21. if (!this.redraw)
  22. this.init(this.selection, this.transform);
  23. else
  24. this.redraw(this.selection, this.transform);
  25. },
  26. onAdd: function (map) {
  27. this.map = map;
  28. var self = this;
  29. //增加svg容器
  30. this._svg = new T.SVG();
  31. map.addLayer(this._svg);
  32. //根节点
  33. this._rootGroup = d3.select(this._svg._rootGroup).classed("d3-overlay", true);
  34. this.selection = this._rootGroup;
  35. //一些转换参数
  36. this.transform = {
  37. //坐标转容器像素坐标。
  38. LngLatToD3Point: function (a, b) {
  39. var _lnglat = a instanceof T.LngLat ? a : new T.LngLat(a, b);
  40. var point = self.map.lngLatToLayerPoint(_lnglat);
  41. this.stream.point(point.x, point.y);
  42. },
  43. //换算一米转多少像素
  44. unitsPerMeter: function () {
  45. return 256 * Math.pow(2, map.getZoom()) / 40075017
  46. },
  47. map: self.map,
  48. layer: self
  49. };
  50. this.transform.pathFromGeojson =
  51. d3.geo.path().projection(d3.geo.transform({
  52. point: this.transform.LngLatToD3Point
  53. }));
  54. //D3绘制
  55. this.init(this.selection, this.transform);
  56. //用于确定坐标的
  57. if (this.redraw)
  58. this.redraw(this.selection, this.transform);
  59. map.addEventListener("zoomend", this._zoomChange, this);
  60. },
  61. onRemove: function (map) {
  62. map.removeEventListener("zoomend", this._zoomChange, this);
  63. this._rootGroup.remove();
  64. map.removeOverLay(this._svg)
  65. },
  66. /**
  67. * 图层移动到最上层
  68. * @returns {T.D3Overlay}
  69. */
  70. bringToFront: function () {
  71. if (this._svg && this._svg._rootGroup) {
  72. var el = this._svg._rootGroup.parentNode;
  73. el.parentNode.appendChild(el);
  74. }
  75. return this;
  76. },
  77. /**
  78. * 图层移动到最底层。
  79. * @returns {T.D3Overlay}
  80. */
  81. bringToBack: function () {
  82. if (this._svg && this._svg._rootGroup) {
  83. var el = this._svg._rootGroup.parentNode;
  84. var parent = el.parentNode;
  85. parent.insertBefore(el, parent.firstChild);
  86. }
  87. return this;
  88. },
  89. })
  90. ;