Skip to content

Commit 2c9dffb

Browse files
author
caoxinke
committed
添加OL3服务器端专题图的例子。
1 parent 3fe3cc8 commit 2c9dffb

14 files changed

+1596
-2
lines changed

‎build/deps.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,12 @@ var deps = {
198198
"./src/OL3/SuperMap/iServer/GetGridCellInfosService.js"
199199
]
200200
},
201+
"Theme": {
202+
"name": "服务器专题图服务",
203+
"src": [
204+
"./src/OL3/SuperMap/iServer/ThemeService.js"
205+
]
206+
},
201207
"NetworkAnalyst": {
202208
"name": "网络分析服务",
203209
"src": [

‎examples/ol3/03_themeDotDensity.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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="https://openlayers.org/en/v4.0.1/css/ol.css">
8+
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol-debug.js"></script>
9+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.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+
var mapService = new ol.supermap.MapService(url);
15+
mapService.on("complete", function (serviceResult) {
16+
var mapJSONObj = serviceResult.element.result;
17+
map = new ol.Map({
18+
target: 'map',
19+
view: new ol.View({
20+
center: [0, 0],
21+
zoom: 2,
22+
projection: "EPSG:4326"
23+
})
24+
});
25+
var options = ol.supermap.Tile.optionsFromMapJSON(url, mapJSONObj);
26+
var layer = new ol.layer.Tile({
27+
source: new ol.supermap.Tile(options)
28+
});
29+
map.addLayer(layer);
30+
31+
themeService = new ol.supermap.ThemeService(url);
32+
themeDotDensity = new ThemeDotDensity({
33+
dotExpression: "Pop_1994",
34+
value: 5000000,
35+
style: new ServerStyle({
36+
markerSize: 3,
37+
markerSymbolID: 12
38+
})
39+
});
40+
themeParameters = new ThemeParameters({
41+
themes: [themeDotDensity],
42+
datasetNames: ["Countries"],
43+
dataSourceNames: ["World"]
44+
});
45+
themeService.on('complete', function (serviceResult) {
46+
var result = serviceResult.element.result;
47+
if (result && result.newResourceID) {
48+
themeLayer = new ol.layer.Tile({
49+
source: new ol.supermap.Tile({
50+
url: url,
51+
noWrap: true,
52+
cacheEnabled: false,
53+
transparent: true,
54+
layersID: result.newResourceID,
55+
tileGrid: new ol.tilegrid.TileGrid({
56+
extent: options.tileGrid.extent_,
57+
resolutions: options.tileGrid.resolutions_
58+
})
59+
})
60+
});
61+
map.addLayer(themeLayer);
62+
}
63+
});
64+
themeService.on('failed', function (error) {
65+
alert(error.errorMsg);
66+
});
67+
});
68+
mapService.getMapStatus();
69+
}
70+
71+
function createTheme() {
72+
themeService.getThemeStatus(themeParameters)
73+
}
74+
75+
function clearLayer() {
76+
if (themeLayer) {
77+
map.removeLayer(themeLayer);
78+
}
79+
}
80+
81+
</script>
82+
</head>
83+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
84+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
85+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
86+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
87+
</div>
88+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
89+
</body>
90+
</html>

‎examples/ol3/03_themeGraduatedSymbol.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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="https://openlayers.org/en/v4.0.1/css/ol.css">
8+
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol-debug.js"></script>
9+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
10+
<script type="text/javascript">
11+
var map, themeService, themeLayer, themeGraduatedSymbol, themeParameters,
12+
url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
13+
function init() {
14+
var mapService = new ol.supermap.MapService(url);
15+
mapService.on("complete", function (serviceResult) {
16+
var mapJSONObj = serviceResult.element.result;
17+
map = new ol.Map({
18+
target: 'map',
19+
view: new ol.View({
20+
center: [12406035, 4304933],
21+
zoom: 4,
22+
projection: "EPSG:3857"
23+
})
24+
});
25+
var options = ol.supermap.Tile.optionsFromMapJSON(url, mapJSONObj);
26+
var layer = new ol.layer.Tile({
27+
source: new ol.supermap.Tile(options)
28+
});
29+
map.addLayer(layer);
30+
31+
themeService = new ol.supermap.ThemeService(url);
32+
themeGraduatedSymbol = new ThemeGraduatedSymbol({
33+
expression: "SMAREA",
34+
baseValue: 3000000000000,
35+
graduatedMode: GraduatedMode.CONSTANT,
36+
flow: new ThemeFlow({
37+
flowEnabled: true
38+
}),
39+
style: new ThemeGraduatedSymbolStyle({
40+
positiveStyle: new ServerStyle({
41+
markerSize: 50,
42+
markerSymbolID: 0,
43+
lineColor: new ServerColor(255, 165, 0),
44+
fillBackColor: new ServerColor(255, 0, 0)
45+
})
46+
})
47+
});
48+
themeParameters = new ThemeParameters({
49+
themes: [themeGraduatedSymbol],
50+
datasetNames: ["China_Province_pg"],
51+
dataSourceNames: ["China"]
52+
});
53+
themeService.on('complete', function (serviceResult) {
54+
var result = serviceResult.element.result;
55+
if (result && result.newResourceID) {
56+
themeLayer = new ol.layer.Tile({
57+
source: new ol.supermap.Tile({
58+
url: url,
59+
noWrap: true,
60+
cacheEnabled: false,
61+
transparent: true,
62+
layersID: result.newResourceID,
63+
tileGrid: new ol.tilegrid.TileGrid({
64+
extent: options.tileGrid.extent_,
65+
resolutions: options.tileGrid.resolutions_
66+
})
67+
})
68+
});
69+
map.addLayer(themeLayer);
70+
}
71+
});
72+
themeService.on('failed', function (error) {
73+
alert(error.errorMsg);
74+
});
75+
});
76+
mapService.getMapStatus();
77+
}
78+
function createTheme() {
79+
themeService.getThemeStatus(themeParameters)
80+
}
81+
82+
function clearLayer() {
83+
if (themeLayer) {
84+
map.removeLayer(themeLayer);
85+
}
86+
}
87+
88+
</script>
89+
</head>
90+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
91+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
92+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
93+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
94+
</div>
95+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
96+
</body>
97+
</html>

‎examples/ol3/03_themeGraph.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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="https://openlayers.org/en/v4.0.1/css/ol.css">
8+
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol-debug.js"></script>
9+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.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+
var mapService = new ol.supermap.MapService(url);
15+
mapService.on("complete", function (serviceResult) {
16+
var mapJSONObj = serviceResult.element.result;
17+
map = new ol.Map({
18+
target: 'map',
19+
view: new ol.View({
20+
center: [118, 40],
21+
zoom: 7,
22+
projection: "EPSG:4326"
23+
})
24+
});
25+
var options = ol.supermap.Tile.optionsFromMapJSON(url, mapJSONObj);
26+
var layer = new ol.layer.Tile({
27+
source: new ol.supermap.Tile(options)
28+
});
29+
map.addLayer(layer);
30+
31+
themeService = new ol.supermap.ThemeService(url);
32+
themeGraph = new ThemeGraph({
33+
items: [
34+
new ThemeGraphItem({
35+
caption: "1992-1995人口增长率",
36+
graphExpression: "Pop_Rate95",
37+
uniformStyle: new ServerStyle({
38+
fillForeColor: new ServerColor(92, 73, 234),
39+
lineWidth: 0.1
40+
})
41+
}),
42+
new ThemeGraphItem({
43+
caption: "1995-1999人口增长率",
44+
graphExpression: "Pop_Rate99",
45+
uniformStyle: new ServerStyle({
46+
fillForeColor: new ServerColor(211, 111, 240),
47+
lineWidth: 0.1
48+
})
49+
})
50+
],
51+
barWidth: 0.03,
52+
graduatedMode: GraduatedMode.SQUAREROOT,
53+
graphAxes: new ThemeGraphAxes({
54+
axesDisplayed: true
55+
}),
56+
graphSize: new ThemeGraphSize({
57+
maxGraphSize: 1,
58+
minGraphSize: 0.35
59+
}),
60+
graphText: new ThemeGraphText({
61+
graphTextDisplayed: true,
62+
graphTextFormat: ThemeGraphTextFormat.VALUE,
63+
graphTextStyle: new ServerTextStyle({
64+
sizeFixed: true,
65+
fontHeight: 9,
66+
fontWidth: 5
67+
})
68+
}),
69+
graphType: ThemeGraphType.BAR3D
70+
});
71+
themeParameters = new ThemeParameters({
72+
themes: [themeGraph],
73+
dataSourceNames: ["Jingjin"],
74+
datasetNames: ["BaseMap_R"]
75+
});
76+
77+
themeService.on('complete', function (serviceResult) {
78+
var result = serviceResult.element.result;
79+
if (result && result.newResourceID) {
80+
themeLayer = new ol.layer.Tile({
81+
source: new ol.supermap.Tile({
82+
url: url,
83+
noWrap: true,
84+
cacheEnabled: false,
85+
transparent: true,
86+
layersID: result.newResourceID,
87+
tileGrid: new ol.tilegrid.TileGrid({
88+
extent: options.tileGrid.extent_,
89+
resolutions: options.tileGrid.resolutions_
90+
})
91+
})
92+
});
93+
map.addLayer(themeLayer);
94+
}
95+
});
96+
themeService.on('failed', function (error) {
97+
alert(error.errorMsg);
98+
});
99+
})
100+
mapService.getMapStatus();
101+
}
102+
103+
function createTheme() {
104+
themeService.getThemeStatus(themeParameters);
105+
}
106+
107+
function clearLayer() {
108+
if (themeLayer) {
109+
map.removeLayer(themeLayer);
110+
}
111+
}
112+
113+
</script>
114+
</head>
115+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
116+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
117+
<input type="button" class="btn btn-primary" value="创建专题图" onclick="createTheme()"/>
118+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
119+
</div>
120+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)