您的位置：首页 > 其它

Full Screen Control with extended source element——全屏控件与扩展源要素

2017-07-03 17:34 253 查看

Click the control in the top right corner to go full screen. Click it again to exit full screen.

单击右上角的按钮实现全屏，再次单击退出全屏。

If there is no button on the map, your browser does not support the
Full Screen API.

如果地图上没有按钮，你的浏览器则不支持全屏控件的API。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Full Screen Control with extended source element</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
<style>
.fullscreen:-moz-full-screen {
height: 100%;
}
.fullscreen:-webkit-full-screen {
height: 100%;
}
.fullscreen:-ms-fullscreen {
height: 100%;
}

.fullscreen:fullscreen {
height: 100%;
}

.fullscreen {
margin-bottom: 10px;
width: 100%;
height: 400px;
}

.ol-rotate {
top: 3em;
}

.map {
width: 80%;
height: 100%;
float: left;
}

.sidepanel {
background: #1F6B75;
width: 20%;
height: 100%;
float: left;
}

.sidepanel-title {
width: 100%;
font-size: 3em;
color: #ffffff;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div id="fullscreen" class="fullscreen">
<div id="map" class="map"></div>
<div class="sidepanel">
<span class="sidepanel-title">Side Panel</span>
</div>
</div>

<script>
var view = new ol.View({
center: [-9101767, 2822912],
zoom: 14
});

var map = new ol.Map({
// 加载全屏控件
controls: ol.control.defaults().extend([
new ol.control.FullScreen({
source: 'fullscreen'
})
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: view
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航