/** * T.D3Overlay借助D3.js强大的可视化功能,扩展天地图已有的覆盖物类 T.Overlay, * 使天地图表达的可视化信息,不仅仅只有地理数据展示,也可以结合更丰富的图形(柱图,饼图)来描述、展现数据。 * 注:chrome、safari、IE9及以上浏览器。 */ T.D3Overlay = T.Overlay.extend({ initialize: function (init, redraw, options) { this.uid = new Date().getTime(); this.init = init; this.redraw = redraw; if (options) this.options = options; d3.select("head") .append("style").attr("type", "text/css") }, /** * 地图缩放触发的函数 * @private */ _zoomChange: function () { if (!this.redraw) this.init(this.selection, this.transform); else this.redraw(this.selection, this.transform); }, onAdd: function (map) { this.map = map; var self = this; //增加svg容器 this._svg = new T.SVG(); map.addLayer(this._svg); //根节点 this._rootGroup = d3.select(this._svg._rootGroup).classed("d3-overlay", true); this.selection = this._rootGroup; //一些转换参数 this.transform = { //坐标转容器像素坐标。 LngLatToD3Point: function (a, b) { var _lnglat = a instanceof T.LngLat ? a : new T.LngLat(a, b); var point = self.map.lngLatToLayerPoint(_lnglat); this.stream.point(point.x, point.y); }, //换算一米转多少像素 unitsPerMeter: function () { return 256 * Math.pow(2, map.getZoom()) / 40075017 }, map: self.map, layer: self }; this.transform.pathFromGeojson = d3.geo.path().projection(d3.geo.transform({ point: this.transform.LngLatToD3Point })); //D3绘制 this.init(this.selection, this.transform); //用于确定坐标的 if (this.redraw) this.redraw(this.selection, this.transform); map.addEventListener("zoomend", this._zoomChange, this); }, onRemove: function (map) { map.removeEventListener("zoomend", this._zoomChange, this); this._rootGroup.remove(); map.removeOverLay(this._svg) }, /** * 图层移动到最上层 * @returns {T.D3Overlay} */ bringToFront: function () { if (this._svg && this._svg._rootGroup) { var el = this._svg._rootGroup.parentNode; el.parentNode.appendChild(el); } return this; }, /** * 图层移动到最底层。 * @returns {T.D3Overlay} */ bringToBack: function () { if (this._svg && this._svg._rootGroup) { var el = this._svg._rootGroup.parentNode; var parent = el.parentNode; parent.insertBefore(el, parent.firstChild); } return this; }, }) ;