Skip to content

Commit e5849ff

Browse files
author
caoxinke
committed
添加OL3下部分地图查询示例。
1 parent 991656f commit e5849ff

File tree

8 files changed

+330
-73
lines changed

8 files changed

+330
-73
lines changed

‎build/deps.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ var deps = {
141141
"src": [
142142
"./src/OL3/SuperMap/iServer/TiledMapLayer.js",
143143
"./src/OL3/SuperMap/iServer/MapService.js",
144-
"./src/OL3/SuperMap/iServer/QueryByBoundsService.js",
144+
"./src/OL3/SuperMap/iServer/QueryService.js",
145145
"./src/OL3/SuperMap/iServer/GetLayersInfoService.js"
146146
]
147147
},

‎examples/ol3/01_mapQueryByBounds.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,8 @@
4141
});
4242
map.addLayer(vectorLayer);
4343

44-
var queryByBoundsService = new ol.supermap.QueryByBoundsService(url, {
45-
name: "Capitals@World.1",
46-
queryBounds: polygon.getExtent()
47-
});
48-
queryByBoundsService.on("complete", function (serviceResult) {
44+
var queryService = new ol.supermap.QueryService(url);
45+
queryService.on("complete", function (serviceResult) {
4946
var vectorSource = new ol.source.Vector({
5047
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
5148
})
@@ -54,7 +51,10 @@
5451
});
5552
map.addLayer(resultLayer);
5653
});
57-
queryByBoundsService.query();
54+
queryService.queryByBounds({
55+
filter: {name: "Capitals@World.1"},
56+
bounds: polygon.getExtent()
57+
});
5858
}
5959
function clearLayer() {
6060
if (vectorLayer) {

‎examples/ol3/01_mapQueryByDistance.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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 for OL3.css">
7+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
8+
<script type="text/javascript">
9+
var map, point, vectorLayer, resultLayer,
10+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
11+
function init() {
12+
map = new ol.Map({
13+
target: 'map',
14+
view: new ol.View({
15+
center: [104, 34],
16+
zoom: 3,
17+
projection: 'EPSG:4326'
18+
})
19+
});
20+
map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"}));
21+
point = new ol.geom.Point([104, 30]);
22+
var iconStyle = new ol.style.Style({
23+
image: new ol.style.Icon(({
24+
src: 'http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/images/markerbig_select.png'
25+
}))
26+
});
27+
var feature = new ol.Feature(point);
28+
feature.setStyle(iconStyle);
29+
var vectorSource = new ol.source.Vector({
30+
features: [feature]
31+
});
32+
vectorLayer = new ol.layer.Vector({
33+
source: vectorSource,
34+
});
35+
map.addLayer(vectorLayer);
36+
}
37+
function query() {
38+
clearLayer();
39+
var queryService = new ol.supermap.QueryService(url);
40+
queryService.on("complete", function (serviceResult) {
41+
var vectorSource = new ol.source.Vector({
42+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
43+
})
44+
resultLayer = new ol.layer.Vector({
45+
source: vectorSource,
46+
});
47+
map.addLayer(resultLayer);
48+
});
49+
queryService.queryByDistance({
50+
filter: {name: "Capitals@World.1"},
51+
distance: 30,
52+
geometry: point
53+
});
54+
}
55+
56+
function clearLayer() {
57+
if (resultLayer) {
58+
map.removeLayer(resultLayer);
59+
}
60+
}
61+
</script>
62+
</head>
63+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
64+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
65+
<input type="button" class="btn btn-primary" value="地图距离查询" onclick="query()"/>
66+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
67+
<span class="alert alert-danger" role="alert">距离：distance = 30</span>
68+
</div>
69+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
70+
</body>
71+
</html>

‎examples/ol3/01_mapQueryByGeometry.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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 for OL3.css">
7+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
8+
<script type="text/javascript">
9+
var map, vectorLayer, resultLayer,
10+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
11+
function init() {
12+
map = new ol.Map({
13+
target: 'map',
14+
view: new ol.View({
15+
center: [40, -10],
16+
zoom: 3,
17+
projection: 'EPSG:4326'
18+
})
19+
});
20+
map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"}));
21+
}
22+
23+
function query() {
24+
clearLayer();
25+
var polygon = new ol.geom.Polygon([[[0, 0], [-30, 0], [-10, 30], [0, 0]]]);
26+
var vectorSource = new ol.source.Vector({
27+
features: [new ol.Feature(polygon)]
28+
});
29+
vectorLayer = new ol.layer.Vector({
30+
source: vectorSource,
31+
style: new ol.style.Style({
32+
stroke: new ol.style.Stroke({
33+
color: 'red',
34+
width: 3
35+
}),
36+
fill: new ol.style.Fill({
37+
color: 'rgba(0, 0, 255, 0.1)'
38+
})
39+
})
40+
});
41+
map.addLayer(vectorLayer);
42+
43+
var queryService = new ol.supermap.QueryService(url);
44+
queryService.queryByGeometry({
45+
filter: {name: "Capitals@World.1"},
46+
geometry: polygon
47+
});
48+
queryService.on("complete", function (serviceResult) {
49+
var vectorSource = new ol.source.Vector({
50+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
51+
})
52+
resultLayer = new ol.layer.Vector({
53+
source: vectorSource,
54+
});
55+
map.addLayer(resultLayer);
56+
});
57+
}
58+
59+
function clearLayer() {
60+
if (vectorLayer) {
61+
map.removeLayer(vectorLayer);
62+
}
63+
if (resultLayer) {
64+
map.removeLayer(resultLayer);
65+
}
66+
}
67+
</script>
68+
</head>
69+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
70+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
71+
<input type="button" class="btn btn-primary" value="地图几何查询" onclick="query()"/>
72+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
73+
</div>
74+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
75+
</body>
76+
</html>

‎examples/ol3/01_mapQueryBySQL.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<title>地图SQL查询</title>
5+
<link rel="stylesheet" href="../css/bootstrap.min.css">
6+
<link rel="stylesheet" href="../../dist/SuperMapiClient9 for OL3.css">
7+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
8+
<script type="text/javascript">
9+
var map, vectorLayer, resultLayer,
10+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
11+
function init() {
12+
map = new ol.Map({
13+
target: 'map',
14+
view: new ol.View({
15+
center: [0, 0],
16+
zoom: 2,
17+
projection: 'EPSG:4326'
18+
})
19+
});
20+
map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"}));
21+
}
22+
23+
function query() {
24+
clearLayer();
25+
var queryService = new ol.supermap.QueryService(url);
26+
queryService.queryBySQL({
27+
filter: {
28+
name: "Capitals@World.1",
29+
attributeFilter: "SMID < 10"
30+
}
31+
});
32+
queryService.on("complete", function (serviceResult) {
33+
var vectorSource = new ol.source.Vector({
34+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
35+
})
36+
resultLayer = new ol.layer.Vector({
37+
source: vectorSource,
38+
});
39+
map.addLayer(resultLayer);
40+
});
41+
}
42+
43+
function clearLayer() {
44+
if (vectorLayer) {
45+
map.removeLayer(vectorLayer);
46+
}
47+
if (resultLayer) {
48+
map.removeLayer(resultLayer);
49+
}
50+
}
51+
</script>
52+
</head>
53+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
54+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
55+
<input type="button" class="btn btn-primary" value="地图SQL查询" onclick="query()"/>
56+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
57+
<span class="alert alert-danger" role="alert">SQL：SMID < 10</span>
58+
</div>
59+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
60+
</body>
61+
</html>

‎examples/ol3/examples.html‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,11 @@
1414
outline: none;
1515
border: none
1616
}
17-
1817
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
1918
width: 1500px;
2019
}
2120

22-
#myTabContent .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
21+
#myTabContent .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
2322
color: #08c;
2423
background-color: #ffffff;
2524
}
@@ -53,8 +52,7 @@ <h3>Openlayers3范例分类</h3>
5352
</div>
5453
<div class="span10">
5554
<ul class='nav nav-pills'>
56-
<li><a href='javascript:void(0)' target='_self' data-name='01_tiledMapLayer'>iServer4326地图</a>
57-
</li>
55+
<li><a href='javascript:void(0)' target='_self' data-name='01_tiledMapLayer'>iServer4326地图</a></li>
5856
</ul>
5957
</div>
6058
</div>
@@ -84,14 +82,14 @@ <h3>Openlayers3范例分类</h3>
8482
</div>
8583
<div class="span10">
8684
<ul class='nav nav-pills'>
87-
<li><a href='javascript:void(0)' target='_self' data-name='01_layerService'>图层信息</a>
88-
</li>
85+
<li><a href='javascript:void(0)' target='_self' data-name='01_layerService'>图层信息</a></li>
8986
</ul>
9087
</div>
9188
</div>
9289
</div>
9390

9491

92+
9593
<div class="container-fluid">
9694
<div class="row-fluid">
9795
<div class="span2">
@@ -101,8 +99,10 @@ <h3>Openlayers3范例分类</h3>
10199
</div>
102100
<div class="span10">
103101
<ul class='nav nav-pills'>
104-
<li><a href='javascript:void(0)' target='_self' data-name='01_mapQueryByBounds'>范围查询</a>
105-
</li>
102+
<li><a href='javascript:void(0)' target='_self' data-name='01_mapQueryByBounds'>范围查询</a></li>
103+
<li><a href='javascript:void(0)' target='_self' data-name='01_mapQueryByDistance'>距离查询</a></li>
104+
<li><a href='javascript:void(0)' target='_self' data-name='01_mapQueryByGeometry'>几何查询</a></li>
105+
<li><a href='javascript:void(0)' target='_self' data-name='01_mapQueryBySQL'>SQL查询</a></li>
106106
</ul>
107107
</div>
108108
</div>
@@ -122,20 +122,13 @@ <h3>Openlayers3范例分类</h3>
122122
</div>
123123
<div class="span10">
124124
<ul class='nav nav-pills'>
125-
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureByIDs'>ID 查询</a>
126-
</li>
127-
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureBySQL'>SQL
128-
查询</a></li>
129-
<li><a href='javascript:void(0)' target='_self'
130-
data-name='02_getFeatureByBounds'>范围查询</a></li>
131-
<li><a href='javascript:void(0)' target='_self'
132-
data-name='02_getFeatureByGeometry'>几何查询</a></li>
133-
<li><a href='javascript:void(0)' target='_self'
134-
data-name='02_getFeatureByBuffer'>缓冲区查询</a></li>
135-
<li><a href='javascript:void(0)' target='_self' data-name='02_filedsService'>字段信息</a>
136-
</li>
137-
<li><a href='javascript:void(0)' target='_self'
138-
data-name='02_filedStatistics'>字段查询统计</a></li>
125+
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureByIDs'>ID 查询</a></li>
126+
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureBySQL'>SQL 查询</a></li>
127+
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureByBounds'>范围查询</a></li>
128+
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureByGeometry'>几何查询</a></li>
129+
<li><a href='javascript:void(0)' target='_self' data-name='02_getFeatureByBuffer'>缓冲区查询</a></li>
130+
<li><a href='javascript:void(0)' target='_self' data-name='02_filedsService'>字段信息</a></li>
131+
<li><a href='javascript:void(0)' target='_self' data-name='02_filedStatistics'>字段查询统计</a></li>
139132

140133
</ul>
141134
</div>
@@ -150,13 +143,11 @@ <h3>Openlayers3范例分类</h3>
150143

151144
<h3><span id='demo-title'></span></h3>
152145
<br>
153-
<span id="skip" onclick="window .open(this.href);" style="cursor: pointer"><a
154-
href='javascript:void(0)'>跳转</a></span>
146+
<span id="skip" onclick="window .open(this.href);" style="cursor: pointer"><a href='javascript:void(0)'>跳转</a></span>
155147
<span> <a id='sourceCode' href='javascript:void(0);' target='_self'>显示源码</a></span>
156148
<div id='func'></div>
157149
<div id='map'>
158-
<iframe id="examplesIframe" height="560px" frameBorder="0" marginheight="0" marginwidth="0"
159-
width="100%"></iframe>
150+
<iframe id="examplesIframe" height="560px" frameBorder="0" marginheight="0" marginwidth="0" width="100%"></iframe>
160151
</div>
161152
<div id='result' class='container'></div>
162153
<div id='mousePositionDiv' class='smCustomControlMousePosition'></div>

‎src/OL3/SuperMap/iServer/QueryByBoundsService.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)