Skip to content

Commit 468b416

Browse files
chenxianhuiichenxianhuii
committed
[examples] 优化示例，增加交互
1 parent 2e1f5e9 commit 468b416

File tree

55 files changed

+2380
-677
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2380
-677
lines changed

‎examples/leaflet/01_mapQueryByBounds.html

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,34 @@
66
<head>
77
<meta charset="UTF-8">
88
<title data-i18n="resources.title_mapQueryByBounds"></title>
9-
<script type="text/javascript" src="../js/include-web.js"></script>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
text-align: center;
15+
z-index: 1000;
16+
border-radius: 4px;
17+
}
18+
</style>
1019
</head>
1120
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="toolbar" class="panel panel-primary">
22+
<div class='panel-heading'>
23+
<h5 class='panel-title text-center' data-i18n="resources.title_queryByBounds"></h5></div>
24+
<div class='panel-body content'>
25+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query"
26+
onclick="query()"/>&nbsp;
27+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear"
28+
onclick="clearElements()"/>
29+
</div>
30+
</div>
1231
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
32+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
33+
<script type="text/javascript" include="leaflet-geoman" src="../../dist/leaflet/include-leaflet.js"></script>
1434
<script type="text/javascript">
1535
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, resultLayer,
36+
var map, resultLayer, polygon,
1737
url = host + "/iserver/services/map-world/rest/maps/World";
1838
map = L.map('map', {
1939
preferCanvas: true,
@@ -23,11 +43,12 @@
2343
zoom: 2
2444
});
2545
new L.supermap.TiledMapLayer(url).addTo(map);
26-
query();
2746

2847
function query() {
29-
var polygon = L.polygon([[0, 0], [39, 0], [39, 60], [0, 60], [0, 0]]);
30-
polygon.addTo(map);
48+
clearElements();
49+
map.pm.enableDraw('Rectangle');
50+
map.on('pm:create', function(e) {
51+
polygon = e.layer;
3152
var param = new L.supermap.QueryByBoundsParameters({
3253
queryParams: {name: "Capitals@World.1"},
3354
bounds: polygon.getBounds()
@@ -36,8 +57,18 @@
3657
.QueryService(url)
3758
.queryByBounds(param).then(function (serviceResult) {
3859
var result = serviceResult.result;
39-
resultLayer = L.geoJSON(result.recordsets[0].features).addTo(map);
60+
resultLayer = L.geoJSON(result.recordsets[0].features, {color: 'red'}).addTo(map);
4061
});
62+
});
63+
}
64+
65+
function clearElements() {
66+
map.off('pm:create');
67+
if (polygon) {
68+
polygon.pm.remove();
69+
polygon = null;
70+
}
71+
resultLayer && map.removeLayer(resultLayer);
4172
}
4273
</script>
4374
</body>

‎examples/leaflet/01_mapQueryByDistance.html

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,35 @@
66
<head>
77
<meta charset="UTF-8">
88
<title data-i18n="resources.title_mapQueryByDistance"></title>
9-
<script type="text/javascript" src="../js/include-web.js"></script>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
width: 240px;
15+
text-align: center;
16+
z-index: 1000;
17+
border-radius: 4px;
18+
}
19+
</style>
1020
</head>
1121
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
22+
<div id="toolbar" class="panel panel-primary">
23+
<div class='panel-heading'>
24+
<h5 class='panel-title text-center' data-i18n="resources.title_queryByDistance"></h5></div>
25+
<div class='panel-body content'>
26+
<div class='panel'>
27+
<div class='input-group'>
28+
<span class='input-group-addon' data-i18n="resources.text_queryDistance"></span>
29+
<input type="number" min="0" class="form-control" id="distance" placeholder="10" />
30+
</div>
31+
</div>
32+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
33+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
34+
</div>
35+
</div>
1236
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
37+
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
1338
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
1439
<script type="text/javascript">
1540
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
@@ -24,13 +49,16 @@
2449
});
2550
new L.supermap.TiledMapLayer(url).addTo(map);
2651
circleMarker = L.circleMarker([30, 104], {color: 'red'}).addTo(map);
27-
circleMarker.bindPopup('distance = 10',{closeOnClick:false}).openPopup();
28-
query();
2952

3053
function query() {
54+
clearFeatures();
55+
var distance = document.getElementById("distance").value || 10;
56+
if (distance <= 0) {
57+
return widgets.alert.showAlert(resources.text_queryDistanceLimit, false);
58+
}
3159
var param = new L.supermap.QueryByDistanceParameters({
3260
queryParams: {name: "Capitals@World.1"},
33-
distance: 10,
61+
distance: distance,
3462
geometry: circleMarker
3563
});
3664
new L.supermap
@@ -40,6 +68,10 @@
4068
resultLayer = L.geoJSON(result.recordsets[0].features).addTo(map);
4169
});
4270
}
71+
72+
function clearFeatures() {
73+
resultLayer && map.removeLayer(resultLayer);
74+
}
4375
</script>
4476
</body>
4577
</html>

‎examples/leaflet/01_mapQueryByGeometry.html

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,35 @@
66
<head>
77
<meta charset="UTF-8">
88
<title data-i18n="resources.title_mapQueryByGeometry"></title>
9-
<script type="text/javascript" src="../js/include-web.js"></script>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
text-align: center;
15+
z-index: 1000;
16+
border-radius: 4px;
17+
}
18+
</style>
1019
</head>
1120
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="toolbar" class="panel panel-primary">
22+
<div class='panel-heading'>
23+
<h5 class='panel-title text-center' data-i18n="resources.title_queryByGeometry"></h5></div>
24+
<div class='panel-body content'>
25+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_point" onclick="query('Marker')"/>
26+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_line" onclick="query('Line')"/>
27+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_rectangle" onclick="query('Rectangle')"/>
28+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_polygon" onclick="query('Polygon')"/>
29+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
30+
</div>
31+
</div>
1232
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
33+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
34+
<script type="text/javascript" include="leaflet-geoman" src="../../dist/leaflet/include-leaflet.js"></script>
1435
<script type="text/javascript">
1536
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, resultLayer,
37+
var map, resultLayer, geo,
1738
url = host + "/iserver/services/map-world/rest/maps/World";
1839
map = L.map('map', {
1940
preferCanvas: true,
@@ -23,22 +44,36 @@
2344
zoom: 3
2445
});
2546
new L.supermap.TiledMapLayer(url).addTo(map);
26-
query();
47+
map.on('pm:create', drawCompleted);
2748

28-
function query() {
29-
var polygon = L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: 'red'});
30-
polygon.addTo(map);
49+
function query(type) {
50+
clearFeatures();
51+
map.pm.enableDraw(type);
52+
}
53+
54+
function drawCompleted(e) {
55+
clearFeatures();
56+
geo = e.layer;
3157
var param = new L.supermap.QueryByGeometryParameters({
32-
queryParams: {name: "Capitals@World.1"},
33-
geometry: polygon
58+
queryParams: {name: "Countries@World"},
59+
geometry: geo
3460
});
3561
new L.supermap
3662
.QueryService(url)
3763
.queryByGeometry(param).then(function (serviceResult) {
3864
var result = serviceResult.result;
39-
resultLayer = L.geoJSON(result.recordsets[0].features).addTo(map);
65+
resultLayer = L.geoJSON(result.recordsets[0].features, {color: 'red'}).addTo(map);
4066
});
4167
}
68+
69+
function clearFeatures() {
70+
map.pm.disableDraw();
71+
if (geo) {
72+
geo.pm.remove();
73+
geo = null;
74+
}
75+
resultLayer && map.removeLayer(resultLayer);
76+
}
4277
</script>
4378
</body>
4479
</html>

‎examples/leaflet/01_mapQueryByGeometry3857.html

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,35 @@
66
<head>
77
<meta charset="UTF-8">
88
<title data-i18n="resources.title_mapQueryByGeometry"></title>
9-
<script type="text/javascript" include="widgets" src="../js/include-web.js"></script>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
text-align: center;
15+
z-index: 1000;
16+
border-radius: 4px;
17+
}
18+
</style>
1019
</head>
1120
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="toolbar" class="panel panel-primary">
22+
<div class='panel-heading'>
23+
<h5 class='panel-title text-center' data-i18n="resources.title_queryByGeometry"></h5></div>
24+
<div class='panel-body content'>
25+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_point" onclick="query('Marker')"/>
26+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_line" onclick="query('Line')"/>
27+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_rectangle" onclick="query('Rectangle')"/>
28+
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_polygon" onclick="query('Polygon')"/>
29+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
30+
</div>
31+
</div>
1232
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
33+
<script type="text/javascript" include="bootstrap,widgets" src="../js/include-web.js"></script>
34+
<script type="text/javascript" include="leaflet-geoman" src="../../dist/leaflet/include-leaflet.js"></script>
1435
<script type="text/javascript">
1536
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, resultLayer,
37+
var map, resultLayer, geo,
1738
url = host + "/iserver/services/map-china400/rest/maps/China";
1839
map = L.map('map', {
1940
preferCanvas: true,
@@ -22,15 +43,18 @@
2243
zoom: 5
2344
});
2445
new L.supermap.TiledMapLayer(url).addTo(map);
46+
map.on('pm:create', drawCompleted);
2547

26-
query();
48+
function query(type) {
49+
clearFeatures();
50+
map.pm.enableDraw(type);
51+
}
2752

28-
function query() {
29-
var polygon = L.polygon([[38, 100], [36, 110], [35, 105], [38, 100]], {color: 'red'});
30-
polygon.addTo(map);
53+
function drawCompleted(e) {
54+
clearFeatures();
55+
geo = e.layer;
3156
//服务端数据坐标系为 3857，因此将查询数据转为与服务端对应坐标系：
32-
var geometry = L.supermap.Util.transform(polygon, L.CRS.EPSG4326, L.CRS.EPSG3857);
33-
57+
var geometry = L.supermap.Util.transform(geo, L.CRS.EPSG4326, L.CRS.EPSG3857);
3458
var param = new L.supermap.QueryByGeometryParameters({
3559
queryParams: {name: "China_Province_pl@China"},
3660
geometry: geometry
@@ -42,11 +66,18 @@
4266
//leaflet 绘制数据默认为 4326，服务器返回数据为 3857，因此在加载到地图前，先进行坐标系转换：
4367
var result = L.supermap.Util.transform(serviceResult.result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326);
4468
widgets.loader.removeLoader();
45-
resultLayer = L.geoJSON(result).addTo(map);
46-
polygon.remove();
47-
polygon.addTo(map);
69+
resultLayer = L.geoJSON(result, {color: 'red'}).addTo(map);
4870
});
4971
}
72+
73+
function clearFeatures() {
74+
map.pm.disableDraw();
75+
if (geo) {
76+
geo.pm.remove();
77+
geo = null;
78+
}
79+
resultLayer && map.removeLayer(resultLayer);
80+
}
5081
</script>
5182
</body>
5283
</html>

‎examples/leaflet/01_mapQueryBySQL.html

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,35 @@
66
<head>
77
<meta charset="UTF-8">
88
<title data-i18n="resources.title_mapQueryBySQL"></title>
9-
<script type="text/javascript" src="../js/include-web.js"></script>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
width: 240px;
15+
text-align: center;
16+
z-index: 1000;
17+
border-radius: 4px;
18+
}
19+
</style>
1020
</head>
1121
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
22+
<div id="toolbar" class="panel panel-primary">
23+
<div class='panel-heading'>
24+
<h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5></div>
25+
<div class='panel-body content'>
26+
<div class='panel'>
27+
<div class='input-group'>
28+
<span class='input-group-addon'>SQL</span>
29+
<input min="0" class="form-control" id="sql" placeholder="SMID < 10" />
30+
</div>
31+
</div>
32+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
33+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
34+
</div>
35+
</div>
1236
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
37+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
1338
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
1439
<script type="text/javascript">
1540
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
@@ -23,13 +48,14 @@
2348
zoom: 2
2449
});
2550
new L.supermap.TiledMapLayer(url).addTo(map);
26-
query();
2751

2852
function query() {
53+
clearFeatures();
54+
var sql = document.getElementById("sql").value || "SMID < 10";
2955
var param = new L.supermap.QueryBySQLParameters({
3056
queryParams: {
3157
name: "Capitals@World.1",
32-
attributeFilter: "SMID < 10"
58+
attributeFilter: sql
3359
}
3460
});
3561
new L.supermap
@@ -39,6 +65,10 @@
3965
resultLayer = L.geoJSON(result.recordsets[0].features).addTo(map);
4066
});
4167
}
68+
69+
function clearFeatures() {
70+
resultLayer && map.removeLayer(resultLayer);
71+
}
4272
</script>
4373
</body>
4474
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy