Skip to content

Commit 40bc3a1

Browse files
author
caoxinke
committed
添加OL3下Data查询和Map查询的例子。 review by zhurch
1 parent 3bb7723 commit 40bc3a1

11 files changed

+790
-27
lines changed

‎examples/ol3/01_mapQueryByBounds.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>地图bounds查询</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+
<script type="text/javascript">
9+
var map, polygon, vectorLayer, resultLayer,
10+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
11+
12+
function init() {
13+
map = new ol.Map({
14+
target: 'map',
15+
view: new ol.View({
16+
center: [0, 0],
17+
zoom: 2,
18+
projection: 'EPSG:4326'
19+
})
20+
});
21+
map.addLayer(new ol.supermap.TiledMapLayer(url, {"pro": "4326"}));
22+
}
23+
24+
function query() {
25+
clearLayer();
26+
polygon = new ol.geom.Polygon([[[0, 0], [116, 0], [116, 39], [0, 39], [0, 0]]]);
27+
var vectorSource = new ol.source.Vector({
28+
features: [new ol.Feature(polygon)]
29+
});
30+
vectorLayer = new ol.layer.Vector({
31+
source: vectorSource,
32+
style: new ol.style.Style({
33+
stroke: new ol.style.Stroke({
34+
color: 'blue',
35+
width: 3
36+
}),
37+
fill: new ol.style.Fill({
38+
color: 'rgba(0, 0, 255, 0.1)'
39+
})
40+
})
41+
});
42+
map.addLayer(vectorLayer);
43+
44+
var queryByBoundsService = new ol.supermap.QueryByBoundsService(url, {
45+
name: "Capitals@World.1",
46+
queryBounds: polygon.getExtent()
47+
});
48+
queryByBoundsService.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+
queryByBoundsService.query();
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="地图bounds查询" 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_tiledMapLayer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<link rel="stylesheet" href="../../dist/SuperMapiClient9.css">
88
<script type="text/javascript" src="../../dist/SuperMapiClient9.js"></script>
99
<script type="text/javascript">
10-
var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
10+
var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
1111
function init() {
1212
var map = new ol.Map({
1313
target: 'map',
1414
view: new ol.View({
1515
center: [0, 0],
16-
zoom: 1,
16+
zoom: 2,
1717
projection: 'EPSG:3857'
1818
})
1919
});

‎examples/ol3/02_getFeatureByBounds.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<title>数据集Bounds查询</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+
<script type="text/javascript">
9+
var map, polygon, vectorLayer, resultLayer,
10+
baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
11+
url = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
12+
function init() {
13+
map = new ol.Map({
14+
target: 'map',
15+
view: new ol.View({
16+
center: [-10, 20],
17+
zoom: 3,
18+
projection: 'EPSG:4326'
19+
})
20+
});
21+
map.addLayer(new ol.supermap.TiledMapLayer(baseUrl, {"pro": "4326"}));
22+
}
23+
function query() {
24+
clearLayer();
25+
polygon = new ol.geom.Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
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 getFeaturesService = new ol.supermap.GetFeaturesService(url);
44+
getFeaturesService.getFeaturesByBoundsService({
45+
dataSetNames: ["World:Countries"],
46+
bounds: polygon.getExtent(),
47+
spatialQueryMode: "INTERSECT"
48+
});
49+
getFeaturesService.on("complete", function (serviceResult) {
50+
var vectorSource = new ol.source.Vector({
51+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result)
52+
})
53+
resultLayer = new ol.layer.Vector({
54+
source: vectorSource,
55+
});
56+
map.addLayer(resultLayer);
57+
});
58+
}
59+
60+
function clearLayer() {
61+
if (vectorLayer) {
62+
map.removeLayer(vectorLayer);
63+
}
64+
if (resultLayer) {
65+
map.removeLayer(resultLayer);
66+
}
67+
}
68+
</script>
69+
</head>
70+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
71+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
72+
<input type="button" class="btn btn-primary" value="数据集Bounds查询" onclick="query()"/>
73+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
74+
</div>
75+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
76+
</body>
77+
</html>

‎examples/ol3/02_getFeatureByBuffer.html‎

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

‎examples/ol3/02_getFeatureByGeometry.html‎

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

‎examples/ol3/02_getFeatureByIDs.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<title>数据集ID查询</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+
<script type="text/javascript">
9+
var map, resultLayer,
10+
baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
11+
url = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
12+
13+
function init() {
14+
map = new ol.Map({
15+
target: 'map',
16+
view: new ol.View({
17+
center: [0, 0],
18+
zoom: 2,
19+
projection: 'EPSG:4326'
20+
})
21+
});
22+
map.addLayer(new ol.supermap.TiledMapLayer(baseUrl, {"pro": "4326"}));
23+
}
24+
25+
function query() {
26+
clearLayer();
27+
var getFeaturesService = new ol.supermap.GetFeaturesService(url);
28+
getFeaturesService.getFeaturesByIDsService({
29+
IDs: [1, 247],
30+
dataSetNames: ["World:Countries"]
31+
});
32+
getFeaturesService.on("complete", function (serviceResult) {
33+
var vectorSource = new ol.source.Vector({
34+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result)
35+
})
36+
resultLayer = new ol.layer.Vector({
37+
source: vectorSource,
38+
});
39+
map.addLayer(resultLayer);
40+
});
41+
}
42+
43+
function clearLayer() {
44+
if (resultLayer) {
45+
map.removeLayer(resultLayer);
46+
}
47+
}
48+
</script>
49+
</head>
50+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
51+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
52+
<input type="button" class="btn btn-primary" value="数据集ID查询" onclick="query()"/>
53+
<input type="button" class="btn btn-primary" value="清除结果" onclick="clearLayer()"/>
54+
<span class="alert alert-danger" role="alert">ID=[1, 247]</span>
55+
56+
</div>
57+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)