Full Screen Control with extended source element——全屏控件与扩展源要素
来源:互联网 发布:淘宝行业数据专用词 编辑:程序博客网 时间:2024/05/22 06:56
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 theFull 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>
阅读全文
0 0
- Full Screen Control with extended source element——全屏控件与扩展源要素
- Full Screen Control——全屏控件
- Full Screen Drag, Rotate, and Zoom——全屏、旋转和缩放
- 添加iPad全屏广告Full-Screen Advertisements
- Supporting Full Screen Mode with Silverlight
- 16. 47. 1. 全屏操作 Full screen mode
- android上全屏(Full Screen)的ImageView
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- 智能全屏full!screen+ v1.6汉…
- HDU1698[JUST A HOOK] 线段树
- 前后端实现Base64格式的传参及转换
- web service简单了解
- 【总结】:本科毕业的简单总结
- OSI七层协议和tcp/ip四层协议详解
- Full Screen Control with extended source element——全屏控件与扩展源要素
- 用PL/SQL DEVELOPER 进行时间转换时出现‘格式出现两次’
- android的webview适应网页(url)中的图片
- Android Studio 修改生成的APK的默认名称的方法
- 指针、引用
- javascript、jquery获取网页的高度和宽度
- 自己总结点oracle的东西
- Python之冒泡排序
- linux内核 DebugFS