Skip to content

Commit 6141457

Browse files
committed
增加leaflet基础控件范例 reviewBy zhurc
1 parent 936f68b commit 6141457

18 files changed

+265
-0
lines changed

dist/include-leaflet.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,13 @@
8989
inputCSS("http://cdn.bootcss.com/leaflet.pm/0.16.0/leaflet.pm.min.css");
9090
inputScript("http://cdn.bootcss.com/leaflet.pm/0.16.0/leaflet.pm.min.js");
9191
}
92+
if (inArray(includes, 'leaflet.miniMap')) {
93+
inputCSS("http://iclient.supermap.io/libs/leaflet/plugins/leaflet-miniMap/dist/Control.MiniMap.min.css");
94+
inputScript("http://iclient.supermap.io/libs/leaflet/plugins/leaflet-miniMap/dist/Control.MiniMap.min.js");
95+
}
96+
if (inArray(includes, 'leaflet.sidebyside')) {
97+
inputScript("http://iclient.supermap.io/libs/leaflet/plugins/leaflet-side-by-side/leaflet-side-by-side.min.js");
98+
}
9299
}
93100

94101
load();

examples/img/leaf-green.png

2.69 KB
Loading

examples/img/leaf-shadow.png

1.89 KB
Loading

examples/leaflet/config.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -842,6 +842,46 @@ var exampleConfig = {
842842
thumbnail: "l_changeTileVersion.png",
843843
fileName: "changeTileVersion"
844844
}]
845+
},
846+
"leafletOfficialControl": {
847+
name: "基础控件",
848+
name_en: "base control",
849+
content: [{
850+
name: "缩放控件",
851+
name_en: "zoom control",
852+
thumbnail: "l_controler_zoom.png",
853+
fileName: "controler_zoom"
854+
}, {
855+
name: "比例尺控件",
856+
name_en: "scaleline control",
857+
thumbnail: "l_controler_scaleline.png",
858+
fileName: "controler_scaleline"
859+
}, {
860+
name: "版权控件",
861+
name_en: "attribution control",
862+
thumbnail: "l_controler_attribution.png",
863+
fileName: "controler_attribution"
864+
}, {
865+
name: "图层切换",
866+
name_en: "layer switch control",
867+
thumbnail: "l_controler_layerswitcher.png",
868+
fileName: "controler_layerswitcher"
869+
}, {
870+
name: "自定义图标",
871+
name_en: "markers with custom icons",
872+
thumbnail: "l_controler_markersWithCustomIcons.png",
873+
fileName: "controler_markersWithCustomIcons"
874+
}, {
875+
name: "卷帘",
876+
name_en: "roller blinds",
877+
thumbnail: "l_controler_layerswitch.png",
878+
fileName: "controler_layerswitch"
879+
}, {
880+
name: "鹰眼图",
881+
name_en: "overview map control",
882+
thumbnail: "l_controler_overviewMap.png",
883+
fileName: "controler_overviewMap"
884+
}]
845885
}
846886
}
847887
},
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>版权控件</title>
6+
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var map,
13+
baseUrl = host + "/iserver/services/map-world/rest/maps/World",
14+
prefix = "<a href='http://leafletjs.com' title='A JS library for interactive maps'>Leaflet</a>",
15+
attribution = "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
16+
17+
18+
map = L.map('map', {
19+
crs: L.CRS.EPSG4326,
20+
center: {lon: 0, lat: 0},
21+
maxZoom: 18,
22+
zoom: 2,
23+
zoomControl: false,
24+
logoControl: false,
25+
attributionControl: false,
26+
});
27+
28+
L.control.attribution({
29+
position: 'bottomright',
30+
prefix: prefix
31+
}).addAttribution(attribution).addTo(map);
32+
33+
L.supermap.tiledMapLayer(baseUrl,{attribution:false}).addTo(map);
34+
35+
</script>
36+
</body>
37+
</html>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>卷帘</title>
6+
<script type="text/javascript" include='leaflet.sidebyside' src="../../dist/include-leaflet.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var map = L.map('map', {
13+
crs: L.CRS.EPSG4326,
14+
center: {lon: 0, lat: 0},
15+
maxZoom: 18,
16+
zoom: 2
17+
});
18+
var osmLayer = L.supermap.tiledMapLayer(host + '/iserver/services/map-world/rest/maps/世界地图_Night', {noWrap: true}).addTo(map);
19+
var stamenLayer = L.supermap.tiledMapLayer(host + '/iserver/services/map-world/rest/maps/World', {noWrap: true}).addTo(map);
20+
L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
21+
</script>
22+
</body>
23+
</html>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>图层切换</title>
6+
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
7+
<style>
8+
.leaflet-control-layers.leaflet-control{
9+
margin-right: 60px;
10+
}
11+
</style>
12+
</head>
13+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
14+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
17+
18+
var BJ = L.marker([39.830660058696104, 116.92866163503169]).bindPopup('北京市'),
19+
CD = L.marker([30.40,104.04]).bindPopup('成都市');
20+
var cities = L.layerGroup([BJ, CD]);
21+
var China = L.supermap.tiledMapLayer(host + '/iserver/services/map-china400/rest/maps/China', {noWrap: true});
22+
var ChinaDark = L.supermap.tiledMapLayer(host + '/iserver/services/map-china400/rest/maps/ChinaDark', {noWrap: true});
23+
var map = L.map('map', {
24+
center: {lon: 0, lat: 0},
25+
maxZoom: 18,
26+
zoom: 2,
27+
zoomControl: false,
28+
layers: [China, cities]
29+
});
30+
var baseMaps = {
31+
"China": China,
32+
"ChinaDark": ChinaDark
33+
};
34+
var overlayMaps = {
35+
"Cities": cities
36+
};
37+
L.control.layers(baseMaps, overlayMaps).addTo(map);
38+
</script>
39+
</body>
40+
</html>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>自定义图标</title>
6+
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var map,
13+
baseUrl = host + "/iserver/services/map-world/rest/maps/World";
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: {lon:116.92866163503169 , lat: 39.830660058696104},
17+
maxZoom: 18,
18+
zoom: 5
19+
});
20+
21+
var greenIcon = L.icon({
22+
iconUrl: '../img/leaf-green.png',
23+
shadowUrl: '../img/leaf-shadow.png',
24+
iconSize: [38, 95],
25+
shadowSize: [50, 64],
26+
iconAnchor: [22, 94],
27+
shadowAnchor: [4, 62],
28+
popupAnchor: [-3, -76]
29+
});
30+
L.marker([39.830660058696104, 116.92866163503169], {icon: greenIcon}).bindPopup("北京市").addTo(map);
31+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
32+
</script>
33+
</body>
34+
</html>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>鹰眼图</title>
6+
<script type="text/javascript" include="leaflet.miniMap" src="../../dist/include-leaflet.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var map,
13+
baseUrl = host + "/iserver/services/map-world/rest/maps/World";
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: {lon: 0, lat: 0},
17+
maxZoom: 18,
18+
zoom: 2,
19+
zoomControl: false,
20+
});
21+
22+
var osm = L.supermap.tiledMapLayer(baseUrl, {minZoom: 5, maxZoom: 18,noWrap: true});
23+
map.addLayer(osm);
24+
map.setView(L.latLng(59.92448055859924, 10.758276373601069), 10);
25+
var osm2 = L.supermap.tiledMapLayer(baseUrl, {minZoom: 0, maxZoom: 13,noWrap: true});
26+
27+
L.control.minimap(osm2, {mapOptions:{ logoControl: false},toggleDisplay: true}).addTo(map);
28+
</script>
29+
</body>
30+
</html>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>比例尺控件</title>
6+
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript">
11+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
12+
var map,
13+
baseUrl = host + "/iserver/services/map-world/rest/maps/World";
14+
map = L.map('map', {
15+
crs: L.CRS.EPSG4326,
16+
center: {lon: 0, lat: 0},
17+
maxZoom: 18,
18+
zoom: 2,
19+
zoomControl:false,
20+
});
21+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
22+
L.control.scale().addTo(map);
23+
</script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)