116 lines
3.1 KiB
JavaScript
116 lines
3.1 KiB
JavaScript
/**
|
||
* T.D3Overlay借助D3.js强大的可视化功能，扩展天地图已有的覆盖物类 T.Overlay，
|
||
* 使天地图表达的可视化信息，不仅仅只有地理数据展示，也可以结合更丰富的图形(柱图，饼图)来描述、展现数据。
|
||
* 注：chrome、safari、IE9及以上浏览器。
|
||
*/
|
||
|
||
const d3= window.d3
|
||
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;
|
||
try {
|
||
d3.select("head") .append("style").attr("type", "text/css")
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
|
||
},
|
||
|
||
/**
|
||
* 地图缩放触发的函数
|
||
* @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;
|
||
},
|
||
|
||
|
||
})
|
||
;
|
||
|
||
|
||
|