Skip to content

Commit bafee67

Browse files
chenmeiyiSupermapchenmeiyiSupermap
committed
添加leaflet下的example，修改示例样式和预览图。review by zhurch
1 parent 6b2adbd commit bafee67

File tree

94 files changed

+2422
-2801
lines changed

Some content is hidden

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

94 files changed

+2422
-2801
lines changed

‎examples/leaflet/01_layerService.html‎

Lines changed: 33 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,40 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>SuperMap 图层信息</title>
6-
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
77
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
10-
<script type="text/javascript">
11-
var map, infowin,
12-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13-
function init() {
14-
map = L.map('map', {
15-
preferCanvas: true,
16-
crs: L.CRS.EPSG4326,
17-
center: {lon: 0, lat: 0},
18-
maxZoom: 18,
19-
zoom: 2
20-
});
21-
L.supermap.tiledMapLayer(url).addTo(map);
22-
}
23-
24-
function layerService() {
25-
closeInfoWin();
26-
L.supermap.getLayersInfoService(url).getLayersInfo().on("complete", function (serviceResult) {
27-
if (!infowin) {
28-
infowin = L.popup({maxWidth: 400});
29-
}
30-
var innerHtml = "";
31-
serviceResult.result.map(function (layer) {
32-
innerHtml += layer.name + "<br>";
33-
});
34-
infowin.setLatLng(map.getCenter()).setContent(innerHtml).openOn(map);
35-
});
36-
}
37-
function closeInfoWin() {
38-
if (infowin) {
39-
infowin.removeFrom(map);
40-
}
41-
}
42-
43-
</script>
448
</head>
45-
<body onload="init()" style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
46-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
47-
<input type="button" class="btn btn-default" value="获取图层信息" onclick="layerService()"/>
48-
<input type="button" class="btn btn-default" value="清除结果" onclick="closeInfoWin()"/>
49-
</div>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
5010
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
5111
</body>
52-
</html>
12+
13+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
15+
<script type="text/javascript">
16+
var map, infowin, url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
17+
map = L.map('map', {
18+
preferCanvas: true,
19+
crs: L.CRS.EPSG4326,
20+
center: {lon: 0, lat: 0},
21+
maxZoom: 18,
22+
zoom: 2
23+
});
24+
L.supermap.tiledMapLayer(url).addTo(map);
25+
layerService();
26+
27+
function layerService() {
28+
L.supermap.getLayersInfoService(url).getLayersInfo().on("complete", function (serviceResult) {
29+
if (!infowin) {
30+
infowin = L.popup({maxWidth: 400});
31+
}
32+
var innerHtml = "";
33+
serviceResult.result.map(function (layer) {
34+
innerHtml += layer.name + "<br>";
35+
});
36+
infowin.setLatLng(map.getCenter()).setContent(innerHtml).openOn(map);
37+
});
38+
}
39+
</script>
40+
</html>
41+
42+

‎examples/leaflet/01_mapQueryByBounds.html‎

Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,38 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>地图bounds查询</title>
6-
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
77
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
10-
<script type="text/javascript">
11-
var map, polygon, resultLayer,
12-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13-
function init() {
14-
map = L.map('map', {
15-
preferCanvas: true,
16-
crs: L.CRS.EPSG4326,
17-
center: {lon: 0, lat: 0},
18-
maxZoom: 18,
19-
zoom: 1
20-
});
21-
L.supermap.tiledMapLayer(url).addTo(map);
22-
polygon = L.polygon([[0, 0], [39, 0], [39, 116], [0, 116], [0, 0]]);
23-
}
24-
function query() {
25-
clearLayer();
26-
polygon.addTo(map);
27-
var param = new QueryByBoundsParameters({
28-
queryParams: {name: "Capitals@World.1"},
29-
bounds: polygon.getBounds()
30-
});
31-
L.supermap.queryService(url).queryByBounds(param).on("complete", function (serviceResult) {
32-
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
33-
});
34-
}
35-
function clearLayer() {
36-
if (polygon) {
37-
polygon.removeFrom(map);
38-
}
39-
if (resultLayer) {
40-
resultLayer.removeFrom(map);
41-
}
42-
}
43-
</script>
448
</head>
45-
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
46-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
47-
<input type="button" class="btn btn-default" value="地图bounds查询" onclick="query()"/>
48-
<input type="button" class="btn btn-default" value="清除结果" onclick="clearLayer()"/>
49-
</div>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
5010
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
5111
</body>
12+
13+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
15+
<script type="text/javascript">
16+
var map, resultLayer,
17+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
18+
map = L.map('map', {
19+
preferCanvas: true,
20+
crs: L.CRS.EPSG4326,
21+
center: {lon: 60, lat: 0},
22+
maxZoom: 18,
23+
zoom: 2
24+
});
25+
L.supermap.tiledMapLayer(url).addTo(map);
26+
query();
27+
28+
function query() {
29+
var polygon = L.polygon([[0, 0], [39, 0], [39, 116], [0, 116], [0, 0]]);
30+
polygon.addTo(map);
31+
var param = new QueryByBoundsParameters({
32+
queryParams: {name: "Capitals@World.1"},
33+
bounds: polygon.getBounds()
34+
});
35+
L.supermap.queryService(url).queryByBounds(param).on("complete", function (serviceResult) {
36+
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
37+
});
38+
}
39+
</script>
5240
</html>

‎examples/leaflet/01_mapQueryByDistance.html‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,39 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>地图距离查询</title>
6-
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
77
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
10-
<script type="text/javascript">
11-
var map, circleMarker, resultLayer,
12-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13-
function init() {
14-
map = L.map('map', {
15-
preferCanvas: true,
16-
crs: L.CRS.EPSG4326,
17-
center: [34, 104],
18-
maxZoom: 18,
19-
zoom: 2
20-
});
21-
L.supermap.tiledMapLayer(url).addTo(map);
22-
circleMarker = L.circleMarker([30, 104]).addTo(map);
23-
}
24-
function query() {
25-
clearLayer();
26-
var param = new QueryByDistanceParameters({
27-
queryParams: {name: "Capitals@World.1"},
28-
distance: 30,
29-
geometry: circleMarker
30-
});
31-
L.supermap.queryService(url).queryByDistance(param).on("complete", function (serviceResult) {
32-
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
33-
});
34-
}
35-
function clearLayer() {
36-
if (resultLayer) {
37-
resultLayer.removeFrom(map);
38-
}
39-
}
40-
</script>
418
</head>
42-
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
43-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
44-
<input type="button" class="btn btn-default" value="地图距离查询" onclick="query()"/>
45-
<input type="button" class="btn btn-default" value="清除结果" onclick="clearLayer()"/>
46-
<span class="alert alert-danger" role="alert" style="padding: 10px;">距离：distance = 30</span>
47-
</div>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
4810
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
4911
</body>
12+
13+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
15+
<script type="text/javascript">
16+
var map, circleMarker, resultLayer,
17+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
18+
map = L.map('map', {
19+
preferCanvas: true,
20+
crs: L.CRS.EPSG4326,
21+
center: [20, 100],
22+
maxZoom: 18,
23+
zoom: 3
24+
});
25+
L.supermap.tiledMapLayer(url).addTo(map);
26+
circleMarker = L.circleMarker([30, 104], {color: 'red'}).addTo(map);
27+
circleMarker.bindPopup('distance = 30').openPopup();
28+
query();
29+
30+
function query() {
31+
var param = new QueryByDistanceParameters({
32+
queryParams: {name: "Capitals@World.1"},
33+
distance: 30,
34+
geometry: circleMarker
35+
});
36+
L.supermap.queryService(url).queryByDistance(param).on("complete", function (serviceResult) {
37+
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
38+
});
39+
}
40+
</script>
5041
</html>

‎examples/leaflet/01_mapQueryByGeometry.html‎

Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,38 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>地图几何查询</title>
6-
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
77
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
10-
<script type="text/javascript">
11-
var map, polygon, resultLayer,
12-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13-
function init() {
14-
map = L.map('map', {
15-
preferCanvas: true,
16-
crs: L.CRS.EPSG4326,
17-
center: [-10, 40],
18-
maxZoom: 18,
19-
zoom: 3
20-
});
21-
L.supermap.tiledMapLayer(url).addTo(map);
22-
polygon = L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: 'red'});
23-
}
24-
function query() {
25-
clearLayer();
26-
polygon.addTo(map);
27-
var param = new QueryByGeometryParameters({
28-
queryParams: {name: "Capitals@World.1"},
29-
geometry: polygon
30-
});
31-
L.supermap.queryService(url).queryByGeometry(param).on("complete", function (serviceResult) {
32-
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
33-
});
34-
}
35-
function clearLayer() {
36-
if (polygon) {
37-
polygon.removeFrom(map);
38-
}
39-
if (resultLayer) {
40-
resultLayer.removeFrom(map);
41-
}
42-
}
43-
</script>
448
</head>
45-
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
46-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
47-
<input type="button" class="btn btn-default" value="地图几何查询" onclick="query()"/>
48-
<input type="button" class="btn btn-default" value="清除结果" onclick="clearLayer()"/>
49-
</div>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
5010
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
5111
</body>
12+
13+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
15+
<script type="text/javascript">
16+
var map, resultLayer,
17+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
18+
map = L.map('map', {
19+
preferCanvas: true,
20+
crs: L.CRS.EPSG4326,
21+
center: [-10, 40],
22+
maxZoom: 18,
23+
zoom: 3
24+
});
25+
L.supermap.tiledMapLayer(url).addTo(map);
26+
query();
27+
28+
function query() {
29+
var polygon = L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: 'red'});
30+
polygon.addTo(map);
31+
var param = new QueryByGeometryParameters({
32+
queryParams: {name: "Capitals@World.1"},
33+
geometry: polygon
34+
});
35+
L.supermap.queryService(url).queryByGeometry(param).on("complete", function (serviceResult) {
36+
resultLayer = L.geoJSON(serviceResult.result).addTo(map);
37+
});
38+
}
39+
</script>
5240
</html>

0 commit comments

Comments
 (0)