Skip to content

Commit 1a5fd20

Browse files
zhurczhurc
committed
leaflet 补全其余的服务器专题图example
1 parent 1c88f3c commit 1a5fd20

File tree

10 files changed

+955
-16
lines changed

10 files changed

+955
-16
lines changed

‎examples/leaflet/03_themeDotDensity.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>点密度专题图</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
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="../../dist/SuperMapiClient9 for Leaflet.js"></script>
10+
<script type="text/javascript">
11+
var map, themeService, themeLayer, themeDotDensity, themeParameters,
12+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13+
function init() {
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: [0, 0],
17+
maxZoom: 18,
18+
zoom: 1
19+
});
20+
L.supermap.tiledMapLayer(url, {noWrap: true, transparent: true}).addTo(map);
21+
themeService = L.supermap.themeService(url);
22+
themeDotDensity = new ThemeDotDensity({
23+
dotExpression: "Pop_1994",
24+
value: 5000000,
25+
style: new ServerStyle({
26+
markerSize: 3,
27+
markerSymbolID: 12
28+
})
29+
});
30+
themeParameters = new ThemeParameters({
31+
themes: [themeDotDensity],
32+
datasetNames: ["Countries"],
33+
dataSourceNames: ["World"]
34+
});
35+
}
36+
function createTheme() {
37+
themeService.getThemeStatus(themeParameters).on('complete', function (serviceResult) {
38+
console.log(serviceResult.result);
39+
var result = serviceResult.result;
40+
if (result && result.newResourceID) {
41+
themeLayer = L.supermap.tiledMapLayer(url, {
42+
noWrap: true,
43+
cacheEnabled: false,
44+
transparent: true,
45+
layersID: result.newResourceID
46+
}).addTo(map);
47+
}
48+
}).on('failed', function (error) {
49+
alert(error.errorMsg);
50+
});
51+
}
52+
53+
function clearLayer() {
54+
if (themeLayer) {
55+
map.removeLayer(themeLayer);
56+
}
57+
}
58+
59+
</script>
60+
</head>
61+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
62+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
63+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
64+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
65+
</div>
66+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
67+
</body>
68+
</html>

‎examples/leaflet/03_themeGraduatedSymbol.html‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
99
<script type="text/javascript" src="../../dist/SuperMapiClient9 for Leaflet.js"></script>
1010
<script type="text/javascript">
11-
var map, themeService, themeLayer,
11+
var map, themeService, themeLayer, themeGraduatedSymbol, themeParameters,
1212
url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
1313
function init() {
1414
map = L.map('map', {
@@ -18,31 +18,29 @@
1818
});
1919
L.supermap.tiledMapLayer(url).addTo(map);
2020
themeService = L.supermap.themeService(url);
21-
22-
}
23-
function createTheme() {
24-
var graStyle = new ThemeGraduatedSymbolStyle({
25-
positiveStyle: new ServerStyle({
26-
markerSize: 50,
27-
markerSymbolID: 0,
28-
lineColor: new ServerColor(255, 165, 0),
29-
fillBackColor: new ServerColor(255, 0, 0)
30-
})
31-
});
32-
var themeGraduatedSymbol = new ThemeGraduatedSymbol({
21+
themeGraduatedSymbol = new ThemeGraduatedSymbol({
3322
expression: "SMAREA",
3423
baseValue: 3000000000000,
3524
graduatedMode: GraduatedMode.CONSTANT,
3625
flow: new ThemeFlow({
3726
flowEnabled: true
3827
}),
39-
style: graStyle
28+
style: new ThemeGraduatedSymbolStyle({
29+
positiveStyle: new ServerStyle({
30+
markerSize: 50,
31+
markerSymbolID: 0,
32+
lineColor: new ServerColor(255, 165, 0),
33+
fillBackColor: new ServerColor(255, 0, 0)
34+
})
35+
})
4036
});
41-
var themeParameters = new ThemeParameters({
37+
themeParameters = new ThemeParameters({
4238
themes: [themeGraduatedSymbol],
4339
datasetNames: ["China_Province_pg"],
4440
dataSourceNames: ["China"]
4541
});
42+
}
43+
function createTheme() {
4644
themeService.getThemeStatus(themeParameters).on('complete', function (serviceResult) {
4745
console.log(serviceResult.result);
4846
var result = serviceResult.result;

‎examples/leaflet/03_themeGraph.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>统计专题图</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
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="../../dist/SuperMapiClient9 for Leaflet.js"></script>
10+
<script type="text/javascript">
11+
var map, themeService, themeLayer, themeGraph, themeParameters,
12+
url = "http://support.supermap.com.cn:8090/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
13+
function init() {
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: [40, 118],
17+
maxZoom: 18,
18+
zoom: 6
19+
});
20+
L.supermap.tiledMapLayer(url, {noWrap: true}).addTo(map);
21+
themeService = L.supermap.themeService(url);
22+
themeGraph = new ThemeGraph({
23+
items: [
24+
new ThemeGraphItem({
25+
caption: "1992-1995人口增长率",
26+
graphExpression: "Pop_Rate95",
27+
uniformStyle: new ServerStyle({
28+
fillForeColor: new ServerColor(92, 73, 234),
29+
lineWidth: 0.1
30+
})
31+
}),
32+
new ThemeGraphItem({
33+
caption: "1995-1999人口增长率",
34+
graphExpression: "Pop_Rate99",
35+
uniformStyle: new ServerStyle({
36+
fillForeColor: new ServerColor(211, 111, 240),
37+
lineWidth: 0.1
38+
})
39+
})
40+
],
41+
barWidth: 0.03,
42+
graduatedMode: GraduatedMode.SQUAREROOT,
43+
graphAxes: new ThemeGraphAxes({
44+
axesDisplayed: true
45+
}),
46+
graphSize: new ThemeGraphSize({
47+
maxGraphSize: 1,
48+
minGraphSize: 0.35
49+
}),
50+
graphText: new ThemeGraphText({
51+
graphTextDisplayed: true,
52+
graphTextFormat: ThemeGraphTextFormat.VALUE,
53+
graphTextStyle: new ServerTextStyle({
54+
sizeFixed: true,
55+
fontHeight: 9,
56+
fontWidth: 5
57+
})
58+
}),
59+
graphType: ThemeGraphType.BAR3D
60+
});
61+
themeParameters = new ThemeParameters({
62+
themes: [themeGraph],
63+
dataSourceNames: ["Jingjin"],
64+
datasetNames: ["BaseMap_R"]
65+
});
66+
}
67+
function createTheme() {
68+
themeService.getThemeStatus(themeParameters).on('complete', function (serviceResult) {
69+
console.log(serviceResult.result);
70+
var result = serviceResult.result;
71+
if (result && result.newResourceID) {
72+
themeLayer = L.supermap.tiledMapLayer(url, {
73+
noWrap: true,
74+
cacheEnabled: false,
75+
transparent: true,
76+
layersID: result.newResourceID
77+
}).addTo(map);
78+
}
79+
}).on('failed', function (error) {
80+
alert(error.errorMsg);
81+
});
82+
}
83+
84+
function clearLayer() {
85+
if (themeLayer) {
86+
map.removeLayer(themeLayer);
87+
}
88+
}
89+
90+
</script>
91+
</head>
92+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
93+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
94+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
95+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
96+
</div>
97+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
98+
</body>
99+
</html>

‎examples/leaflet/03_themeGridRange.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>栅格分段专题图</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
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="../../dist/SuperMapiClient9 for Leaflet.js"></script>
10+
<script type="text/javascript">
11+
var map, themeService, themeLayer, themeGridRange, themeParameters,
12+
url = "http://support.supermap.com.cn:8090/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
13+
function init() {
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: [40, 118],
17+
maxZoom: 18,
18+
zoom: 6
19+
});
20+
L.supermap.tiledMapLayer(url, {noWrap: true}).addTo(map);
21+
themeService = L.supermap.themeService(url);
22+
var themeGridRangeItem1 = new ThemeGridRangeItem({
23+
start: -4,
24+
end: 120,
25+
color: new ServerColor(198, 244, 240)
26+
}),
27+
28+
themeGridRangeItem2 = new ThemeGridRangeItem({
29+
start: 120,
30+
end: 240,
31+
color: new ServerColor(176, 244, 188)
32+
}),
33+
themeGridRangeItem3 = new ThemeGridRangeItem({
34+
start: 240,
35+
end: 360,
36+
color: new ServerColor(218, 251, 178)
37+
}),
38+
themeGridRangeItem4 = new ThemeGridRangeItem({
39+
start: 360,
40+
end: 480,
41+
color: new ServerColor(220, 236, 145)
42+
}),
43+
themeGridRangeItem5 = new ThemeGridRangeItem({
44+
start: 480,
45+
end: 600,
46+
color: new ServerColor(96, 198, 66)
47+
}),
48+
themeGridRangeItem6 = new ThemeGridRangeItem({
49+
start: 600,
50+
end: 720,
51+
color: new ServerColor(20, 142, 53)
52+
}),
53+
themeGridRangeItem7 = new ThemeGridRangeItem({
54+
start: 720,
55+
end: 840,
56+
color: new ServerColor(85, 144, 55)
57+
}),
58+
59+
themeGridRangeItem8 = new ThemeGridRangeItem({
60+
start: 840,
61+
end: 960,
62+
color: new ServerColor(171, 168, 38)
63+
}),
64+
themeGridRangeItem9 = new ThemeGridRangeItem({
65+
start: 960,
66+
end: 1100,
67+
color: new ServerColor(235, 165, 9)
68+
}),
69+
themeGridRangeItem10 = new ThemeGridRangeItem({
70+
start: 1100,
71+
end: 1220,
72+
color: new ServerColor(203, 89, 2)
73+
}),
74+
themeGridRangeItem11 = new ThemeGridRangeItem({
75+
start: 1220,
76+
end: 1340,
77+
color: new ServerColor(157, 25, 1)
78+
}),
79+
themeGridRangeItem12 = new ThemeGridRangeItem({
80+
start: 1340,
81+
end: 1460,
82+
color: new ServerColor(118, 15, 3)
83+
}),
84+
themeGridRangeItem13 = new ThemeGridRangeItem({
85+
start: 1460,
86+
end: 1600,
87+
color: new ServerColor(112, 32, 7)
88+
}),
89+
90+
themeGridRangeItem14 = new ThemeGridRangeItem({
91+
start: 1600,
92+
end: 1800,
93+
color: new ServerColor(106, 45, 12)
94+
}),
95+
themeGridRangeItem15 = new ThemeGridRangeItem({
96+
start: 1800,
97+
end: 2000,
98+
color: new ServerColor(129, 80, 50)
99+
}),
100+
themeGridRangeItem16 = new ThemeGridRangeItem({
101+
start: 2000,
102+
end: 2167,
103+
color: new ServerColor(160, 154, 146)
104+
});
105+
themeGridRange = new ThemeGridRange({
106+
reverseColor: false,
107+
rangeMode: RangeMode.EQUALINTERVAL,
108+
items: [
109+
themeGridRangeItem1, themeGridRangeItem2,
110+
themeGridRangeItem3, themeGridRangeItem4,
111+
themeGridRangeItem5, themeGridRangeItem6,
112+
themeGridRangeItem7, themeGridRangeItem8,
113+
themeGridRangeItem9, themeGridRangeItem10,
114+
themeGridRangeItem11, themeGridRangeItem12,
115+
themeGridRangeItem13, themeGridRangeItem14,
116+
themeGridRangeItem15, themeGridRangeItem16
117+
]
118+
});
119+
themeParameters = new ThemeParameters({
120+
datasetNames: ["JingjinTerrain"],
121+
dataSourceNames: ["Jingjin"],
122+
joinItems: null,
123+
themes: [themeGridRange]
124+
});
125+
}
126+
function createTheme() {
127+
themeService.getThemeStatus(themeParameters).on('complete', function (serviceResult) {
128+
console.log(serviceResult.result);
129+
var result = serviceResult.result;
130+
if (result && result.newResourceID) {
131+
themeLayer = L.supermap.tiledMapLayer(url, {
132+
noWrap: true,
133+
cacheEnabled: false,
134+
transparent: true,
135+
layersID: result.newResourceID
136+
}).addTo(map);
137+
}
138+
}).on('failed', function (error) {
139+
alert(error.errorMsg);
140+
});
141+
}
142+
143+
function clearLayer() {
144+
if (themeLayer) {
145+
map.removeLayer(themeLayer);
146+
}
147+
}
148+
149+
</script>
150+
</head>
151+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
152+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
153+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
154+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
155+
</div>
156+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)