Skip to content

Commit f821ba1

Browse files
zhurczhurc
committed
新增等级符号专题图，并添加示例
1 parent 3a17a6f commit f821ba1

25 files changed

+22788
-15902
lines changed

‎build/deps.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,15 @@ var deps = {
8989
//ProcessingJobs
9090
"./src/common/iServer/KernelDensityJobsService.js",
9191
"./src/common/iServer/BuildCacheJobsService.js",
92+
],
93+
"graph": [
94+
"./src/common/iServer/Bar.js",
95+
"./src/common/iServer/Bar3D.js",
96+
"./src/common/iServer/Circle.js",
97+
"./src/common/iServer/Line.js",
98+
"./src/common/iServer/Pie.js",
99+
"./src/common/iServer/Point.js",
100+
"./src/common/iServer/Ring.js"
92101
]
93102

94103
},
@@ -223,7 +232,8 @@ var deps = {
223232
"name": "专题图",
224233
"src": [
225234
'./src/leaflet/overlay/UniqueThemeLayer.js',
226-
'./src/leaflet/overlay/RangeThemeLayer.js'
235+
'./src/leaflet/overlay/RangeThemeLayer.js',
236+
'./src/leaflet/overlay/RankSymbolThemeLayer.js'
227237
]
228238
}
229239
}

‎dist/iclient9-leaflet.js‎

Lines changed: 19255 additions & 15884 deletions
Large diffs are not rendered by default.

‎dist/iclient9-openlayers.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,8 +1083,21 @@ SuperMap.ClientType = {
10831083
REFERER: "Referer",
10841084
REQUESTIP: "RequestIP",
10851085
NONE: "NONE",
1086-
SERVER:"SERVER",
1087-
WEB:"WEB"
1086+
SERVER: "SERVER",
1087+
WEB: "WEB"
1088+
};
1089+
/**
1090+
* 客户端专题图图表类型
1091+
* @type {{BAR: string, BAR3D: string, CIRCLE: string, PIE: string, POINT: string, LINE: string, RING: string}}
1092+
*/
1093+
SuperMap.ChartType = {
1094+
BAR: "Bar",
1095+
BAR3D: "Bar3D",
1096+
CIRCLE: "Circle",
1097+
PIE: "Pie",
1098+
POINT: "Point",
1099+
LINE: "Line",
1100+
RING: "Ring"
10881101
};
10891102

10901103
/***/ }),

‎examples/css/editor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ html, body, .wrapper {
1414
.edit-container {
1515
background-color: #f9f9f9;
1616
position: relative;
17-
margin-top: 52px;
17+
margin-top: 50px;
1818
}
1919

2020
.edit-container section.content {
2121
width: 100%;
2222
padding: 0;
2323
position: absolute;
2424
top: 0;
25-
bottom: 0;
25+
bottom: -2px;
2626
}
2727

2828
.content .pane {

‎examples/leaflet/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,10 @@ var exampleConfig = {
428428
name: "分段专题图",
429429
thumbnail: "l_rangeThemeLayer.png",
430430
fileName: "rangeThemeLayer"
431+
}, {
432+
name: "等级符号专题图",
433+
thumbnail: "l_rankSymbolThemeLayer.png",
434+
fileName: "rankSymbolThemeLayer"
431435
}]
432436
}
433437

‎examples/leaflet/data/chinaConsumptionLevel.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// 中国各个省份的居民消费水平(单位：元)信息
2+
// 每个数组元素的含义如下：
3+
// [省级行政单位名称, X坐标, Y坐标, 2009年居民消费水平, 2010年居民消费水平, 2011年居民消费水平, 2012年居民消费水平, 2013年居民消费水平],
4+
var chinaConsumptionLevel = [
5+
["北京市", 116.407283, 39.904557, 22023, 24982, 27760, 30350, 33337],
6+
["天津市", 117.215268, 39.120963, 15200, 17852, 20624, 22984, 26261],
7+
["上海市", 121.47398, 31.230075, 26582, 32271, 35439, 36893, 39223],
8+
["重庆市", 106.551417, 29.563228, 8494, 9723, 11832, 13655, 15270],
9+
["黑龙江省", 126.661901, 45.742659, 7922, 9121, 10634, 11601, 12978],
10+
["吉林省", 125.326104, 43.89604, 8538, 9241, 10811, 12276, 13676],
11+
["辽宁省", 123.43707, 41.835528, 10906, 13016, 15635, 17999, 20156],
12+
["山西省", 112.562359, 37.874938, 6854, 8447, 9746, 10829, 12078],
13+
["河北省", 114.469767, 38.036032, 7193, 8057, 9551, 10749, 11557],
14+
["陕西省", 108.953051, 34.267153, 7154, 8474, 10053, 11852, 13206],
15+
["甘肃省", 103.826321, 36.059405, 5509, 6234, 7493, 8542, 9616],
16+
["四川省", 104.075463, 30.651149, 6863, 8182, 9903, 11280, 12485],
17+
["贵州省", 106.707603, 26.597997, 5456, 6218, 7389, 8372, 9541],
18+
["云南省", 102.709129, 25.046619, 5976, 6811, 8278, 9782, 11224],
19+
["海南省", 109.691225, 19.047108, 6695, 7553, 9238, 10634, 11712],
20+
["浙江省", 120.154526, 30.267173, 15867, 18274, 21346, 22845, 24771],
21+
["山东省", 117.020411, 36.669569, 10494, 11606, 13524, 15095, 16728],
22+
["江苏省", 118.763288, 32.061173, 11993, 14035, 17167, 19452, 23585],
23+
["安徽省", 117.285057, 31.861554, 6829, 8237, 10055, 10978, 11618],
24+
["福建省", 119.296405, 26.100023, 11336, 13187, 14958, 16144, 17115],
25+
["江西省", 115.908871, 28.674211, 6212, 7989, 9523, 10573, 11910],
26+
["河南省", 113.687284, 34.767907, 6607, 7837, 9171, 10380, 11782],
27+
["湖北省", 114.341949, 30.545553, 7791, 8977, 10873, 12283, 13912],
28+
["湖南省", 112.983553, 28.116295, 7929, 8922, 10547, 11740, 12920],
29+
["广东省", 113.265246, 23.130964, 15243, 17211, 19578, 21823, 23739],
30+
["青海省", 101.780064, 36.620995, 6501, 7326, 8744, 10289, 12070],
31+
["西藏自治区", 91.117774, 29.647017, 3985, 4469, 4730, 5340, 6275],
32+
["广西壮族自治区", 108.327509, 22.816721, 6968, 7920, 9181, 10519, 11710],
33+
["内蒙古自治区", 111.765996, 40.817419, 9460, 10925, 13264, 15196, 17168],
34+
["宁夏回族自治区", 106.258639, 38.471179, 7918, 8992, 10937, 12120, 13537],
35+
["新疆维吾尔自治区", 87.626951, 43.793217, 5945, 7400, 8895, 10675, 11401]
36+
];

‎examples/leaflet/img/l_rankSymbolThemeLayer.png‎

42.2 KB
Loading

‎examples/leaflet/rangeThemeLayer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@
9999
}];
100100

101101
themeLayer.on('mousemove', highLightLayer);
102-
addThemeLayer();
102+
addThemeFeatures();
103103
}
104104

105-
function addThemeLayer() {
105+
function addThemeFeatures() {
106106
var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
107107
queryParameter: new SuperMap.FilterParameter({
108108
name: "Jingjin",

‎examples/leaflet/rankSymbolThemeLayer.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>等级符号专题图</title>
6+
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9+
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
10+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
11+
<script type="text/javascript" src="./data/chinaConsumptionLevel.js"></script>
12+
13+
</head>
14+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
15+
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
16+
<script type="text/javascript">
17+
var map, themeLayer,
18+
infowin, infowinPosition,
19+
baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China_4326";
20+
21+
init();
22+
23+
function init() {
24+
// 统计图模块要求浏览器支持 Canvas 渲染
25+
if (!document.createElement('canvas').getContext) {
26+
alert("您的浏览器不支持 Canvas，请升级！");
27+
return;
28+
}
29+
30+
map = L.map("map", {
31+
crs: L.CRS.EPSG4326,
32+
center: [34, 104],
33+
maxZoom: 18,
34+
zoom: 3
35+
});
36+
37+
map.on("mousemove", function (e) {
38+
infowinPosition = e.layerPoint;
39+
});
40+
41+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
42+
initThemeLayer();
43+
}
44+
45+
function initThemeLayer() {
46+
// 创建一个圆形符号专题图层
47+
themeLayer = L.supermap.rankSymbolThemeLayer("themeLayer", SuperMap.ChartType.CIRCLE);
48+
49+
// 指定用于专题图制作的属性字段 详看下面 addThemeLayer（）中的feature.attrs.CON2009
50+
themeLayer.themeField = "CON2009";
51+
52+
// 配置图表参数
53+
themeLayer.symbolSetting = {
54+
//允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
55+
codomain: [0, 40000],
56+
//圆最大半径 默认100
57+
maxR: 100,
58+
//圆最小半径 默认0
59+
minR: 0,
60+
// 圆形样式
61+
circleStyle: {fillOpacity: 0.8},
62+
// 符号专题图填充颜色
63+
fillColor: "#FFA500",
64+
// 专题图hover 样式
65+
circleHoverStyle: {fillOpacity: 1}
66+
};
67+
themeLayer.addTo(map);
68+
// 注册专题图 mousemove, mouseout事件(注意：专题图图层对象自带 on 函数，没有 events 对象)
69+
themeLayer.on("mousemove", showInfoWin);
70+
themeLayer.on("mouseout", closeInfoWin);
71+
addThemeFeatures();
72+
}
73+
74+
//构建 feature 数据
75+
function addThemeFeatures() {
76+
clearThemeLayer();
77+
var features = [];
78+
for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
79+
// 省居民消费水平（单位：元）信息
80+
var provinceInfo = chinaConsumptionLevel[i];
81+
var geo = L.point(provinceInfo[1], provinceInfo[2]);
82+
var attrs = {NAME: provinceInfo[0], CON2009: provinceInfo[3]};
83+
var feature = L.supermap.themeFeature(geo, attrs);
84+
features.push(feature);
85+
}
86+
themeLayer.addFeatures(features);
87+
}
88+
89+
// 清除专题图层中的内容
90+
function clearThemeLayer() {
91+
themeLayer.clear();
92+
closeInfoWin();
93+
}
94+
95+
// 显示地图弹窗
96+
function showInfoWin(e) {
97+
// e.target 是图形对象，即数据的可视化对象。
98+
// 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
99+
// 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
100+
if (e.target && e.target.refDataID && e.target.dataInfo) {
101+
closeInfoWin();
102+
// 获取图形对应的数据 (feature)
103+
var fea = themeLayer.getFeatureById(e.target.refDataID);
104+
if (!fea) {
105+
return;
106+
}
107+
var info = e.target.dataInfo;
108+
// 弹窗内容
109+
var contentHTML = "<div style='color: #000; background-color: #fff'>";
110+
contentHTML += "省级行政区名称:<br><strong>" + fea.attributes.NAME + "</strong>";
111+
contentHTML += "<hr style='margin: 3px'>";
112+
switch (info.field) {
113+
case "CON2009":
114+
contentHTML += "09年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
115+
break;
116+
default:
117+
contentHTML += "No Data";
118+
}
119+
contentHTML += "</div>";
120+
121+
var latLng = map.layerPointToLatLng(infowinPosition);
122+
if (!infowin) {
123+
infowin = L.popup();
124+
}
125+
infowin.setLatLng(latLng);
126+
infowin.setContent(contentHTML);
127+
infowin.openOn(map);
128+
}
129+
}
130+
131+
132+
// 移除和销毁地图弹窗
133+
function closeInfoWin() {
134+
if (infowin) {
135+
try {
136+
infowin.remove();
137+
} catch (e) {
138+
alert(e.message);
139+
}
140+
}
141+
}
142+
</script>
143+
</body>
144+
</html>

‎src/common/REST.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1002,6 +1002,19 @@ SuperMap.ClientType = {
10021002
REFERER: "Referer",
10031003
REQUESTIP: "RequestIP",
10041004
NONE: "NONE",
1005-
SERVER:"SERVER",
1006-
WEB:"WEB"
1005+
SERVER: "SERVER",
1006+
WEB: "WEB"
1007+
};
1008+
/**
1009+
* 客户端专题图图表类型
1010+
* @type {{BAR: string, BAR3D: string, CIRCLE: string, PIE: string, POINT: string, LINE: string, RING: string}}
1011+
*/
1012+
SuperMap.ChartType = {
1013+
BAR: "Bar",
1014+
BAR3D: "Bar3D",
1015+
CIRCLE: "Circle",
1016+
PIE: "Pie",
1017+
POINT: "Point",
1018+
LINE: "Line",
1019+
RING: "Ring"
10071020
};

0 commit comments

Comments
 (0)