Skip to content

Commit 452d049

Browse files
author
caoxinke
committed
整合OL3数据查询各种服务为一个统一接口并添加OL下的几个example. review by zhurch
1 parent 3ca5e50 commit 452d049

15 files changed

+561
-232
lines changed

‎build/deps.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,7 @@ var deps = {
149149
"name": "Data服务",
150150
"src": [
151151
"./src/OL3/SuperMap/iServer/FieldStatisticService.js",
152-
"./src/OL3/SuperMap/iServer/GetFeaturesByBoundsService.js",
153-
"./src/OL3/SuperMap/iServer/GetFeaturesByBufferService.js",
154-
"./src/OL3/SuperMap/iServer/GetFeaturesByGeometryService.js",
155-
"./src/OL3/SuperMap/iServer/GetFeaturesByIDsService.js",
156-
"./src/OL3/SuperMap/iServer/GetFeaturesBySQLService.js",
152+
"./src/OL3/SuperMap/iServer/GetFeaturesService.js",
157153
"./src/OL3/SuperMap/iServer/GetFieldsService.js"
158154
]
159155
}

‎examples/ol3/01_layerService.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>SuperMap 图层信息</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../../dist/SuperMapiClient9.css">
8+
<script type="text/javascript" src="../../dist/SuperMapiClient9.js"></script>
9+
<style>
10+
.ol-popup {
11+
position: absolute;
12+
background-color: white;
13+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
14+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
15+
padding: 15px;
16+
border-radius: 10px;
17+
border: 1px solid #cccccc;
18+
bottom: 12px;
19+
left: -50px;
20+
min-width: 280px;
21+
}
22+
23+
.ol-popup:after, .ol-popup:before {
24+
top: 100%;
25+
border: solid transparent;
26+
content: " ";
27+
height: 0;
28+
width: 0;
29+
position: absolute;
30+
pointer-events: none;
31+
}
32+
33+
.ol-popup:after {
34+
border-top-color: white;
35+
border-width: 10px;
36+
left: 48px;
37+
margin-left: -10px;
38+
}
39+
40+
.ol-popup:before {
41+
border-top-color: #cccccc;
42+
border-width: 11px;
43+
left: 48px;
44+
margin-left: -11px;
45+
}
46+
47+
</style>
48+
49+
<div id="popup" class="ol-popup">
50+
<div id="popup-content"></div>
51+
</div>
52+
53+
<script type="text/javascript">
54+
var container = document.getElementById('popup');
55+
var content = document.getElementById('popup-content');
56+
var overlay = new ol.Overlay(({
57+
element: container,
58+
autoPan: true,
59+
autoPanAnimation: {
60+
duration: 250
61+
}
62+
}));
63+
var map,
64+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
65+
function init() {
66+
map = new ol.Map({
67+
target: 'map',
68+
view: new ol.View({
69+
center: [0, 0],
70+
zoom: 2,
71+
projection: 'EPSG:4326'
72+
}),
73+
overlays: [overlay],
74+
});
75+
map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"}));
76+
}
77+
78+
function layerService() {
79+
closeInfoWin();
80+
var getLayersInfoService = new ol.supermap.GetLayersInfoService(url);
81+
getLayersInfoService.on("complete", function (serviceResult) {
82+
var innerHtml = "";
83+
serviceResult.element.result.map(function (layer) {
84+
innerHtml += layer.name + "<br>";
85+
});
86+
content.innerHTML = innerHtml;
87+
overlay.setPosition([0, 0]);
88+
});
89+
getLayersInfoService.getLayersInfo();
90+
}
91+
92+
function closeInfoWin() {
93+
if (overlay) {
94+
overlay.setPosition(undefined);
95+
}
96+
}
97+
98+
</script>
99+
</head>
100+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
101+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
102+
<input type="button" class="btn btn-primary" value="获取图层信息" onclick="layerService()"/>
103+
<input type="button" class="btn btn-primary" value="清除结果" onclick="closeInfoWin()"/>
104+
</div>
105+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
106+
</body>
107+
</html>

‎examples/ol3/01_mapService.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
}
6363
}));
6464
var map,
65-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
65+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
6666
function init() {
6767
map = new ol.Map({
6868
target: 'map',
@@ -87,9 +87,9 @@
8787
innerHTML += "中心点:" + JSON.stringify(serviceResult.element.result.center, null, 2) + "<br>";
8888
innerHTML += "Bounds:" + JSON.stringify(serviceResult.element.result.bounds, null, 2) + "<br>";
8989
content.innerHTML = innerHTML;
90+
overlay.setPosition([0, 0]);
9091
});
9192
mapService.getMapStatus();
92-
overlay.setPosition([0, 0]);
9393
}
9494

9595
function closeInfoWin() {

‎examples/ol3/02_filedStatistics.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<title>数据集字段查询统计</title>
5+
<link rel="stylesheet" href="../css/bootstrap.min.css">
6+
<link rel="stylesheet" href="../../dist/SuperMapiClient9.css">
7+
<script type="text/javascript" src="../../dist/SuperMapiClient9.js"></script>
8+
<style>
9+
.ol-popup {
10+
position: absolute;
11+
background-color: white;
12+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
13+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
14+
padding: 15px;
15+
border-radius: 10px;
16+
border: 1px solid #cccccc;
17+
bottom: 12px;
18+
left: -50px;
19+
min-width: 280px;
20+
}
21+
</style>
22+
23+
<div id="popup" class="ol-popup">
24+
<div id="popup-content"></div>
25+
</div>
26+
</head>
27+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
28+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
29+
<span>图层：</span>
30+
<select id='layerSelect' class="form-control" style='width:200px;margin-top:10px;display: inline-block'></select>
31+
<span>字段：</span>
32+
<span style="display: inline-block">
33+
<select id='fieldSelect' class="form-control" style='width:100px;margin-top:10px;'></select>
34+
</span>
35+
<input type="button" class="btn btn-primary" value="统计" onclick="fieldStatistic()"/>
36+
<input type="button" class="btn btn-primary" value="清除" onclick="clearfieldStatistic()"/>
37+
</div>
38+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
39+
</body>
40+
41+
<script type="text/javascript">
42+
var container = document.getElementById('popup');
43+
var content = document.getElementById('popup-content');
44+
var overlay = new ol.Overlay(({
45+
element: container,
46+
autoPan: true,
47+
autoPanAnimation: {
48+
duration: 250
49+
}
50+
}));
51+
var map, currentData, layersName = [],
52+
mapURL = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
53+
dataURL = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
54+
55+
function init() {
56+
map = new ol.Map({
57+
target: 'map',
58+
view: new ol.View({
59+
center: [0, 0],
60+
zoom: 2,
61+
projection: 'EPSG:4326'
62+
}),
63+
overlays: [overlay],
64+
});
65+
map.addLayer(new ol.supermap.TiledMapLayer(mapURL, {"pro": "4326"}));
66+
showLayersInfo();
67+
document.getElementById("layerSelect").onchange = function () {
68+
getFields();
69+
};
70+
}
71+
72+
//获取子图层信息
73+
function showLayersInfo() {
74+
var subLayer;
75+
var getLayersInfoService = new ol.supermap.GetLayersInfoService(mapURL);
76+
getLayersInfoService.on("complete", function (serviceResult) {
77+
var layers = serviceResult.element.result;
78+
if (!layers) return;
79+
for (var i = 0, len = layers.length; i < len; i++) {
80+
subLayer = layers[i];
81+
if ("UGC" == subLayer.type) {
82+
//记录数据源，数据集信息供字段查询统计使用
83+
if (subLayer.datasetInfo.name && subLayer.datasetInfo.dataSourceName) {
84+
layersName[i] = {
85+
dataSetName: subLayer.datasetInfo.name,
86+
dataSourceName: subLayer.datasetInfo.dataSourceName,
87+
layerName: subLayer.name
88+
};
89+
}
90+
}
91+
}
92+
//添加图层信息到选择列表
93+
var layerSelect = document.getElementById("layerSelect");
94+
layerSelect.innerHTML = "";
95+
for (i = 0; i < layersName.length; i++) {
96+
layerSelect.options[i] = new Option(layersName[i].layerName);
97+
}
98+
getFields();
99+
});
100+
getLayersInfoService.getLayersInfo();
101+
}
102+
103+
function getFields() {
104+
var layerSelect = document.getElementById("layerSelect");
105+
var name = layerSelect.options[layerSelect.selectedIndex].innerHTML;
106+
var dataInfo;
107+
for (var i = 0; i < layersName.length; i++) {
108+
dataInfo = layersName[i];
109+
if (dataInfo.layerName == name) {
110+
//设置数据集，数据源，查询fields信息
111+
currentData = dataInfo;
112+
var getFieldsService = new ol.supermap.GetFieldsService(dataURL, {
113+
dataSourceName: dataInfo.dataSourceName, dataSetName: dataInfo.dataSetName
114+
});
115+
getFieldsService.on("complete", function (serviceResult) {
116+
var fieldNames = serviceResult.element.result.fieldNames;
117+
var fieldSelect = document.getElementById("fieldSelect");
118+
fieldSelect.innerHTML = "";
119+
for (var j = 0; j < fieldNames.length; j++) {
120+
fieldSelect.options[j] = new Option(fieldNames[j], fieldNames[j]);
121+
}
122+
});
123+
getFieldsService.getFields();
124+
}
125+
}
126+
}
127+
128+
function fieldStatistic() {
129+
var fieldSelect = document.getElementById("fieldSelect");
130+
var fieldName = fieldSelect.options[fieldSelect.selectedIndex].innerHTML;
131+
if (currentData) {
132+
var fieldStatisticService = new ol.supermap.FieldStatisticService(dataURL, {
133+
dataSourceName: currentData.dataSourceName,
134+
dataSetName: currentData.dataSetName,
135+
fieldName: fieldName
136+
});
137+
fieldStatisticService.on("complete", function (serviceResult) {
138+
showResult(serviceResult.element.result);
139+
});
140+
fieldStatisticService.getFieldStatisticInfo();
141+
}
142+
}
143+
144+
function showResult(serviceResult) {
145+
if (!serviceResult) {
146+
return;
147+
}
148+
var innerHTMLStr = '<div style="line-height: 35px;">'
149+
+ '<strong>字段（' + serviceResult.fieldName + '）统计结果:</strong><div>';
150+
var keys = ["AVERAGE", "MAX", "MIN", "STDDEVIATION", "SUM", "VARIANCE"];
151+
var tableStr = "<table id='trafficRes' class='table table-bordered'><tr><td>平均值</td><td>最大值</td><td>最小值</td>"
152+
+ "<td>标准差</td><td>和</td><td>方差</td></tr>";
153+
var resultTR = "<tr>";
154+
for (var i = 0; i < keys.length; i++) {
155+
resultTR += "<td>" + serviceResult[keys[i]] + "</td>";
156+
}
157+
resultTR += "</tr>";
158+
tableStr += resultTR + "</table>";
159+
innerHTMLStr += tableStr;
160+
content.innerHTML = innerHTMLStr;
161+
overlay.setPosition([0, 0]);
162+
}
163+
164+
function clearfieldStatistic() {
165+
overlay.setPosition(undefined);
166+
}
167+
</script>
168+
169+
</html>

0 commit comments

Comments
 (0)