define([
|
"dojo/_base/declare",
|
"esri/layers/GraphicsLayer",
|
"esri/geometry/Point",
|
"esri/graphic",
|
"dojox/charting/Chart2D",
|
"dojox/charting/plot2d/Pie",
|
"dojox/charting/plot2d/Bars",
|
"dojox/charting/plot2d/Columns",
|
"dojox/charting/themes/Claro",
|
"dojox/charting/themes/PlotKit/blue",
|
"dojox/charting/themes/PlotKit/cyan",
|
"dojox/charting/themes/PlotKit/green",
|
"dojox/charting/themes/MiamiNice",
|
"dojox/charting/themes/Tufte",
|
"dojox/charting/themes/CubanShirts",
|
"dojox/charting/action2d/MoveSlice",
|
"dojox/charting/action2d/Tooltip",
|
"dojox/charting/action2d/Highlight",
|
"dojox/charting/widget/Legend"
|
], function (declare,
|
GraphicsLayer,
|
Point,
|
Graphic,
|
Chart2D,
|
Pie,
|
Bars,
|
Columns,
|
Claro,
|
blue,
|
cyan,
|
green,
|
MiamiNice,
|
Tufte,
|
CubanShirts,
|
MoveSlice,
|
Tooltip,
|
Highlight,
|
Legend) {
|
return declare("ChartLayer", [GraphicsLayer], {
|
showFields: null,
|
chartThemesIndex: null,
|
constructor: function (options) {
|
this._id = options.id || "";
|
this._divId = options.chartDiv || "chart";
|
this._charttype = options.chartType || "Pie";
|
this._chartSize = options.size || 100;
|
},
|
//设置图表类型
|
setChartType: function (type) {
|
this._charttype = type;
|
},
|
//设置需要展示的字段
|
setShowFields: function (fields) {
|
this.showFields = fields;
|
},
|
//设置主题颜色
|
setChartThemesIndex: function (index) {
|
this.chartThemesIndex = index;
|
},
|
// 重构esri/layers/GraphicsLayer方法
|
_setMap: function (map, surface) {
|
// GraphicsLayer will add its own listener here
|
var div = this.inherited(arguments);
|
return div;
|
},
|
_unsetMap: function () {
|
this.inherited(arguments);
|
},
|
hide: function () {
|
dojo.style(dojo.byId(this._divId), {
|
"display": "none"
|
});
|
},
|
show: function () {
|
dojo.style(dojo.byId(this._divId), {
|
"display": "block"
|
});
|
},
|
//拖拽
|
_onPanStartHandler: function () {
|
// this.hide();
|
},
|
//缩放
|
_onZoomStartHandler: function () {
|
// this.hide();
|
},
|
_onExtentChangeHandler: function () {
|
this._refresh(true);
|
},
|
_refresh: function (redraw) {
|
var that = this;
|
var gs = this.graphics,
|
_draw = this._draw;
|
|
for (i = 0; i < gs.length; i++) {
|
_draw(gs[i], redraw);
|
}
|
// this.show();
|
},
|
_draw: function (graphic, redraw) {
|
if (!this._map) {
|
return;
|
}
|
if (graphic instanceof Graphic)//判断graphic是否为MapChartGraphic类型
|
{
|
this._drawChart(graphic, redraw);
|
}
|
},
|
_drawChart: function (graphic, redraw) {
|
var taxLotExtent = graphic.geometry.getExtent();
|
var showMapPt = taxLotExtent.getCenter();
|
// var showMapPt = graphic.geometry,
|
var attribute = graphic.attributes;
|
var showPt = this._map.toScreen(showMapPt);
|
var id = "song" + attribute["name"];
|
// alert(this.showFields);
|
var series = [];
|
|
// var series = [attribute["非植被覆盖区"], attribute["植被劣覆盖区"]];
|
if (dojo.byId("div" + id)) {
|
dojo.byId(this._divId).removeChild(dojo.byId("div" + id));
|
}
|
|
if (attribute) {
|
var _chartDiv = dojo.doc.createElement("div");
|
_chartDiv.id = "div" + id;
|
dojo.style(_chartDiv, {
|
"left": (showPt.x - this._chartSize / 3) + "px",
|
"top": (showPt.y - this._chartSize / 2) + "px",
|
// "left": showPt.x + "px",
|
// "top": showPt.y + "px",
|
"position": "absolute",
|
"width": this._chartSize + "px",
|
"height": this._chartSize + "px",
|
"z-index": 5
|
});
|
dojo.byId(this._divId).appendChild(_chartDiv);
|
|
var _chart = new Chart2D(_chartDiv, {
|
title: attribute["name"],
|
titlePos: "top",
|
titleGap: 8,
|
titleFont: "normal normal bold 8pt Arial",
|
titleFontColor: "#000000"
|
});
|
var _themes;
|
if (this.chartThemesIndex == 0) {
|
_themes = blue;
|
}
|
else if (this.chartThemesIndex == 1) {
|
_themes = green;
|
}
|
else {
|
_themes = cyan;
|
}
|
_themes.chart.fill = "transparent";
|
_themes.chart.stroke = "transparent";
|
_themes.plotarea.fill = "transparent";
|
_chart.setTheme(_themes);
|
var isZero = true;
|
switch (this._charttype) {
|
case "Pie": {//饼状图
|
_chart.addPlot("default", {
|
type: Pie,
|
fontColor: "white"
|
});
|
|
for (var int = 0; int < this.showFields.length; int++) {
|
if (attribute[this.showFields[int]]) {
|
if (this.showFields[int].indexOf("面积") != -1) {
|
var unit = "公顷";
|
} else{
|
var unit = "个";
|
}
|
series.push({
|
y: attribute[this.showFields[int]],
|
tooltip: this.showFields[int] + "：" + attribute[this.showFields[int]]+unit
|
});
|
isZero = false;
|
}
|
}
|
break;
|
}
|
case "Columns": {//柱状图
|
_chart.addPlot("default", {
|
type: Columns,
|
gap: 3,
|
minBarSize: 0, maxBarSize: 200
|
});
|
for (var int = 0; int < this.showFields.length; int++) {
|
series.push({
|
y: attribute[this.showFields[int]],
|
tooltip: this.showFields[int] + "：" + attribute[this.showFields[int]]
|
});
|
}
|
var xStr = this.showFields;
|
// Add axes
|
var myLabelFunc = function (text, value, precision) {
|
return xStr[text - 1];
|
};
|
_chart.addAxis("x", {labelFunc: myLabelFunc});
|
_chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
|
break;
|
}
|
case "Bars": {//条形图
|
_chart.addPlot("default", {
|
type: Bars,
|
gap: 3
|
});
|
for (var int = 0; int < this.showFields.length; int++) {
|
series.push({
|
y: attribute[this.showFields[int]],
|
tooltip: this.showFields[int] + "：" + attribute[this.showFields[int]]
|
});
|
}
|
var xStr = this.showFields;
|
// Add axes
|
var myLabelFunc = function (text, value, precision) {
|
return xStr[text - 1];
|
};
|
// _chart.addAxis("x", { labelFunc: myLabelFunc });
|
// _chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
|
break;
|
}
|
default: {//柱状图
|
_chart.addPlot("default", {
|
type: this._charttype,
|
labels: false,
|
gap: 3
|
});
|
_chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
|
break;
|
}
|
}
|
if (!isZero) {
|
//生成图表
|
_chart.addSeries(id, series, {stroke: {width: 1}});
|
//效果
|
new Highlight(_chart, "default");
|
new Tooltip(_chart, "default");
|
new MoveSlice(_chart, "default");
|
} else {
|
_chart.titlePos = "centre";
|
_chart.title = attribute["name"] + "：无";
|
}
|
_chart.render();
|
// var legendTwo = new Legend({chart: _chart}, _chartDiv.id);
|
}
|
|
}
|
});
|
});
|
