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: "[email protected]"},
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: "[email protected]"},
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: "[email protected]",
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)