Skip to content
Navigation Menu
{{ message }}
forked from woliqiang/iClient-for-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathctl_GraphPie.html
More file actions
236 lines (213 loc) · 9.91 KB
/
Copy pathctl_GraphPie.html
File metadata and controls
236 lines (213 loc) · 9.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>饼图</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 510px;
border:1px solid #3473b7;
}
#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
/*地图弹出窗圆角*/
#infowin{
-moz-border-radius: 5px;
-webkit-border-radius: 5px
}
</style>
<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='../libs/SuperMap.Include.js'></script>
<script src='./js/graph/Pie.js'></script>
<script src='./data/chinaConsumptionLevel.js'></script>
<script type="text/javascript">
var map, local, layer, themeLayer, infowin, infowinPosition;
var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
url = host + "/iserver/services/map-china400/rest/maps/China_4326";
function init(){
// 统计图模块要求浏览器支持 Canvas 渲染
if(!document.createElement('canvas').getContext){
alert("您的浏览器不支持 Canvas,请升级!");
return;
}
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("Jingjin", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
layer.events.on({"layerInitialized":addLayer});
// 创建一个饼状图(Pie)统计专题图图层
themeLayer = new SuperMap.Layer.Graph("ThemeLayer", "Pie");
// 指定用于专题图制作的属性字段
themeLayer.themeFields = ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"];
// 配置图表参数
themeLayer.chartsSetting = {
// width,height,codomain 分别表示图表宽、高、数据值域;此三项参数为必设参数
width: 100,
height: 100,
codomain: [0, 40000], // 允许图表展示的值域范围,此范围外的数据将不制作图表
// 饼图扇形(表示字段值的图形)样式
sectorStyle: { fillOpacity: 0.8 },
// 按字段设置饼图扇形 (样式与 themeLayer.themeFields 数组中的字段名称一一对应)
sectorStyleByFields: [{ fillColor: "#FFB980" }, { fillColor: "#5AB1EF" }, { fillColor: "#B6A2DE" }, { fillColor: "#2EC7C9" }, { fillColor: "#D87A80" }],
// 饼图扇形 hover 样式
sectorHoverStyle: { fillOpacity: 1 }
};
// 注册专题图 mousemove, mouseout事件(注意:专题图图层对象自带 on 函数,没有 events 对象)
themeLayer.on("mousemove", showInfoWin);
themeLayer.on("mouseout", closeInfoWin);
// 注册地图 mousemove,用于获取当前鼠标在地图中的像素位置
map.events.on({"mousemove":function(e){
infowinPosition = e.xy.clone();
// 偏移
infowinPosition.x += 40;
infowinPosition.y -= 25;
}});
}
function addLayer() {
map.addLayers([layer, themeLayer]);
map.setCenter(new SuperMap.LonLat(104.067923,34.679943), 2);
}
//构建 feature 数据, 专题图的数据必须是 SuperMap.Feature.Vector
function addThemeLayer() {
clearThemeLayer();
var features = [];
for(var i = 0, len = chinaConsumptionLevel.length; i < len; i++){
// 省居民消费水平(单位:元)信息
var provinceInfo = chinaConsumptionLevel[i];
var geo = new SuperMap.Geometry.Point(provinceInfo[1], provinceInfo[2]);
var attrs = {};
attrs.NAME = provinceInfo[0];
attrs.CON2009 = provinceInfo[3];
attrs.CON2010 = provinceInfo[4];
attrs.CON2011 = provinceInfo[5];
attrs.CON2012 = provinceInfo[6];
attrs.CON2013 = provinceInfo[7];
var fea = new SuperMap.Feature.Vector(geo, attrs);
features.push(fea);
}
themeLayer.addFeatures(features);
}
// 清除专题图层中的内容
function clearThemeLayer() {
themeLayer.clear();
closeInfoWin();
}
// 显示地图弹窗
function showInfoWin(e){
// e.target 是图形对象,即数据的可视化对象,饼状图中是扇形。
// 图形对象的 refDataID 属性是数据(feature)的 id 属性,它指明图形对象是由那个数据制作而来;
// 图形对象的 dataInfo 属性是图形对象表示的具体数据,他有两个属性,field 和 value;
if(e.target && e.target.refDataID && e.target.dataInfo){
closeInfoWin();
// 获取图形对应的数据 (feature)
var fea = themeLayer.getFeatureById(e.target.refDataID);
var info = e.target.dataInfo;
// 弹窗内容
var contentHTML = "<div style='color: #000; background-color: #fff'>";
contentHTML += "省级行政区名称:<br><strong>" + fea.attributes.NAME + "</strong>";
contentHTML += "<hr style='margin: 3px'>";
switch(info.field){
case "CON2009":
contentHTML += "09年居民消费水平 <br/><strong>" + info.value + "</strong>(元)";
break;
case "CON2010":
contentHTML += "10年居民消费水平 <br/><strong>" + info.value + "</strong>(元)";
break;
case "CON2011":
contentHTML += "11年居民消费水平 <br/><strong>" + info.value + "</strong>(元)";
break;
case "CON2012":
contentHTML += "12年居民消费水平 <br/><strong>" + info.value + "</strong>(元)";
break;
case "CON2013":
contentHTML += "13年居民消费水平 <br/><strong>" + info.value + "</strong>(元)";
break;
default:
contentHTML += "No Data";
}
contentHTML += "</div>";
// 弹出框大小
var infowinSize = (SuperMap.Browser.name == "firefox")? new SuperMap.Size(150, 105): new SuperMap.Size(140, 90);
// 弹出窗地理位置
var lonLat = map.getLonLatFromPixel(infowinPosition);
infowin = new SuperMap.Popup(
"infowin",
lonLat,
infowinSize,
contentHTML,
false,
false,
null);
infowin.setBackgroundColor("#fff");
infowin.setOpacity(0.8);
if(infowin) map.removePopup(infowin);
map.addPopup(infowin);
}
}
// 高亮纯色样式
function resetStyleB(){
themeLayer.chartsSetting.sectorStyleByFields = [{ fillColor: "#86B379" }, { fillColor: "#68A54A" }, { fillColor: "#408829" }, { fillColor: "#7CCD7C" }, { fillColor: "#228B22" }];
themeLayer.chartsSetting.sectorHoverStyle = {
fillColor: "#397B29",
fillOpacity: 1
};
themeLayer.redraw();
}
// 高亮描边样式
function resetStyleC(){
themeLayer.chartsSetting.sectorStyleByFields = [{ fillColor: "#C8E49C" }, { fillColor: "#ED9678" }, { fillColor: "#E7DAC9" }, { fillColor: "#CB8E85" }, { fillColor: "#F3F39D" }];
themeLayer.chartsSetting.sectorHoverStyle = {
stroke: true,
strokeColor: "#D8361B",
strokeWidth: 2,
fillOpacity: 1
};
themeLayer.redraw();
}
// 初始样式
function resetStyleA(){
themeLayer.chartsSetting.sectorStyleByFields = [{ fillColor: "#FFB980" }, { fillColor: "#5AB1EF" }, { fillColor: "#B6A2DE" }, { fillColor: "#2EC7C9" }, { fillColor: "#D87A80" }];
themeLayer.chartsSetting.sectorHoverStyle = { fillOpacity: 1 };
themeLayer.redraw();
}
// 移除和销毁地图弹窗
function closeInfoWin() {
if(infowin) {
try {
map.removePopup(infowin);
}
catch(e) {
alert(e.message);
}
}
}
</script>
</head>
<body onload="init()">
<div id="toolbar">
<input type="button" class="btn" value="添加专题图" onclick="addThemeLayer()" />
<input type="button" class="btn" value="高亮填充" onclick="resetStyleB()" />
<input type="button" class="btn" value="高亮描边" onclick="resetStyleC()" />
<input type="button" class="btn" value="初始样式" onclick="resetStyleA()" />
<input type="button" class="btn" value="清除" onclick="clearThemeLayer()" />
</div>
<div id="map"></div>
</body>
</html>
You can’t perform that action at this time.
