Skip to content

Commit a5eb069

Browse files
wuzhuorui5wuzhuorui5
committed
增加openlayers的基础控件示例 reviewBy zhurc
1 parent 02d80ef commit a5eb069

14 files changed

+337
-2
lines changed

‎dist/include-openlayers.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@
6060
if (inArray(includes, 'animatedclusterlayer')) {
6161
inputScript("http://iclient.supermap.io/libs/openlayers/plugins/animatedclusterlayer/animatedclusterlayer.js");
6262
}
63-
if (inArray(includes, 'datgui')) {
64-
inputScript("http://cdn.bootcss.com/dat-gui/0.6.5/dat.gui.js");
63+
64+
if (inArray(includes, 'layerswitcher')) {
65+
inputCSS("http://iclient.supermap.io/libs/openlayers/plugins/ol3-layerswitcher/ol3-layerswitcher.css");
66+
inputScript("http://iclient.supermap.io/libs/openlayers/plugins/ol3-layerswitcher/ol3-layerswitcher.js");
6567
}
6668
}
6769

‎examples/openlayers/config.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -760,6 +760,41 @@ var exampleConfig = {
760760
thumbnail: "ol_changeTileVersion.png",
761761
fileName: "changeTileVersion"
762762
}]
763+
},
764+
"openlayersOfficialControl": {
765+
name: "基础控件",
766+
name_en: "base control",
767+
content: [{
768+
name: "缩放控件",
769+
name_en: "zoom control",
770+
thumbnail: "ol_controler_zoom.png",
771+
fileName: "controler_zoom"
772+
}, {
773+
name: "比例尺控件",
774+
name_en: "scaleline control",
775+
thumbnail: "ol_controler_scaleline.png",
776+
fileName: "controler_scaleline"
777+
}, {
778+
name: "版权控件",
779+
name_en: "attribution control",
780+
thumbnail: "ol_controler_attribution.png",
781+
fileName: "controler_attribution"
782+
}, {
783+
name: "图层切换",
784+
name_en: "layer switch control",
785+
thumbnail: "ol_controler_layerswitcher.png",
786+
fileName: "controler_layerswitcher"
787+
}, {
788+
name: "卷帘",
789+
name_en: "roller blinds",
790+
thumbnail: "ol_controler_layerswitch.png",
791+
fileName: "controler_layerswitch"
792+
}, {
793+
name: "鹰眼图",
794+
name_en: "overview map control",
795+
thumbnail: "ol_controler_overviewMap.png",
796+
fileName: "controler_overviewMap"
797+
}]
763798
}
764799
}
765800
},

‎examples/openlayers/controler_attribution.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>版权控件</title>
6+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body>
9+
<div id="map" class="map"></div>
10+
<script>
11+
var map,
12+
url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-world/rest/maps/World";
13+
14+
map = new ol.Map({
15+
controls: ol.control.defaults({attribution: false, zoom: false}),
16+
target: 'map',
17+
view: new ol.View({
18+
center: [0, 0],
19+
zoom: 2,
20+
projection: 'EPSG:4326'
21+
})
22+
});
23+
24+
var layer = new ol.layer.Tile({
25+
source: new ol.source.TileSuperMapRest({
26+
url: url
27+
}),
28+
projection: 'EPSG:4326'
29+
});
30+
//添加版权控件
31+
map.addControl(new ol.control.Attribution({collapsed: false}));
32+
map.addLayer(layer);
33+
</script>
34+
</body>
35+
</html>

‎examples/openlayers/controler_layerswitch.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>卷帘</title>
6+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:95%">
9+
<div id="map" style="width: 100%;height:100%"></div>
10+
<input id="swipe" type="range" style="width: 100%;">
11+
<script type="text/javascript">
12+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13+
var worldurl = host + '/iserver/services/map-world/rest/maps/World',
14+
worldNighturl = host + '/iserver/services/map-world/rest/maps/世界地图_Night';
15+
16+
var world = new ol.layer.Tile({
17+
source: new ol.source.TileSuperMapRest({
18+
url: worldurl
19+
}),
20+
projection: 'EPSG:4326'
21+
});
22+
23+
var worldNight = new ol.layer.Tile({
24+
source: new ol.source.TileSuperMapRest({
25+
url: worldNighturl
26+
}),
27+
projection: 'EPSG:4326'
28+
});
29+
30+
var map = new ol.Map({
31+
layers: [world, worldNight],
32+
target: 'map',
33+
controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
34+
view: new ol.View({
35+
center: [0, 0],
36+
zoom: 3,
37+
projection: 'EPSG:4326'
38+
})
39+
});
40+
41+
var swipe = document.getElementById('swipe');
42+
worldNight.on('precompose', function (event) {
43+
var ctx = event.context;
44+
var width = ctx.canvas.width * (swipe.value / 100);
45+
46+
ctx.save();
47+
ctx.beginPath();
48+
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
49+
ctx.clip();
50+
});
51+
52+
worldNight.on('postcompose', function (event) {
53+
var ctx = event.context;
54+
ctx.restore();
55+
});
56+
57+
swipe.addEventListener('input', function () {
58+
map.render();
59+
}, false);
60+
</script>
61+
</body>
62+
</html>

‎examples/openlayers/controler_layerswitcher.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>图层切换</title>
6+
<script type="text/javascript" include="layerswitcher" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
9+
<div id="map" style="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+
China = host + '/iserver/services/map-china400/rest/maps/China',
14+
ChinaDark = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
15+
map = new ol.Map({
16+
layers: [
17+
new ol.layer.Group({
18+
'title': '切换图层',
19+
layers: [
20+
new ol.layer.Tile({
21+
title: 'China',
22+
type: 'base',
23+
visible: true,
24+
source: new ol.source.TileSuperMapRest({
25+
url: China
26+
}),
27+
}),
28+
new ol.layer.Tile({
29+
title: 'ChinaDark',
30+
type: 'base',
31+
visible: false,
32+
source: new ol.source.TileSuperMapRest({
33+
url: ChinaDark
34+
}),
35+
36+
})
37+
]
38+
}),
39+
],
40+
target: 'map',
41+
controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
42+
view: new ol.View({
43+
center: [100, 38],
44+
projection: 'EPSG:3857',
45+
zoom: 3
46+
}),
47+
});
48+
var layerSwitcher = new ol.control.LayerSwitcher({});
49+
map.addControl(layerSwitcher);
50+
</script>
51+
</body>
52+
</html>

‎examples/openlayers/controler_overviewMap.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>鹰眼控件</title>
6+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
9+
<div id="map" style="width: 100%;height:100%"></div>
10+
<script type="text/javascript">
11+
var map,
12+
url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-world/rest/maps/World";
13+
14+
map = new ol.Map({
15+
target: 'map',
16+
controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
17+
view: new ol.View({
18+
center: [0, 0],
19+
zoom: 3,
20+
projection: 'EPSG:4326'
21+
})
22+
});
23+
24+
//添加鹰眼控件
25+
map.addControl(new ol.control.OverviewMap({
26+
view: new ol.View({
27+
projection: 'EPSG:4326'
28+
}),
29+
collapsed: false,
30+
}));
31+
32+
var layer = new ol.layer.Tile({
33+
source: new ol.source.TileSuperMapRest({
34+
url: url
35+
}),
36+
});
37+
map.addLayer(layer);
38+
39+
</script>
40+
</body>
41+
</html>

‎examples/openlayers/controler_scaleline.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>比例尺控件</title>
6+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
9+
<div id="map" style="width: 100%;height:100%"></div>
10+
<script type="text/javascript">
11+
var map,
12+
url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-world/rest/maps/World";
13+
14+
map = new ol.Map({
15+
target: 'map',
16+
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}),
17+
view: new ol.View({
18+
center: [0, 0],
19+
zoom: 3,
20+
projection: 'EPSG:4326'
21+
})
22+
});
23+
24+
var layer = new ol.layer.Tile({
25+
source: new ol.source.TileSuperMapRest({
26+
url: url
27+
}),
28+
projection: 'EPSG:4326'
29+
});
30+
zoomControl = new ol.control.ScaleLine();
31+
map.addControl(zoomControl);
32+
map.addLayer(layer);
33+
</script>
34+
</body>
35+
</html>

‎examples/openlayers/controler_zoom.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>缩放控件</title>
6+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
9+
<div id="map" style="width: 100%;height:100%"></div>
10+
<script type="text/javascript">
11+
var map,
12+
url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-world/rest/maps/World";
13+
14+
map = new ol.Map({
15+
target: 'map',
16+
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}),
17+
view: new ol.View({
18+
center: [0, 0],
19+
zoom: 3,
20+
projection: 'EPSG:4326'
21+
})
22+
});
23+
24+
var ele;
25+
//禁用双击缩放
26+
function disableDoubleClickZoom() {
27+
map.getInteractions().forEach(function (element, index, array) {
28+
if (element instanceof (ol.interaction.DoubleClickZoom)) {
29+
ele = element;
30+
ele.setActive(false);
31+
}
32+
});
33+
}
34+
//禁用拖动
35+
function disableDragPan() {
36+
map.getInteractions().forEach(function (element, index, array) {
37+
if (element instanceof ol.interaction.DragPan) {
38+
ele = element;
39+
ele.setActive(false);
40+
}
41+
});
42+
}
43+
//禁用鼠标wheel操作
44+
function disableMouseWheelZoom() {
45+
map.getInteractions().forEach(function (element, index, array) {
46+
if (element instanceof ol.interaction.MouseWheelZoom) {
47+
ele = element;
48+
ele.setActive(false);
49+
}
50+
});
51+
}
52+
disableDoubleClickZoom();
53+
disableDragPan();
54+
disableMouseWheelZoom();
55+
56+
var layer = new ol.layer.Tile({
57+
source: new ol.source.TileSuperMapRest({
58+
url: url
59+
}),
60+
projection: 'EPSG:4326'
61+
});
62+
63+
//zoom控件
64+
zoomControl = new ol.control.Zoom();
65+
map.addControl(zoomControl);
66+
67+
//zoomBar控件
68+
map.addControl(new ol.control.ZoomSlider({}));
69+
map.addLayer(layer);
70+
71+
</script>
72+
</body>
73+
</html>

‎examples/openlayers/img/ol_controler_attribution.png‎

31.2 KB
Loading

‎examples/openlayers/img/ol_controler_layerswitch.png‎

22.6 KB
Loading

0 commit comments

Comments
 (0)