Full Screen Control——全屏控件

最新推荐文章于 2023-09-01 22:25:17 发布

桃李不言_下自成蹊

最新推荐文章于 2023-09-01 22:25:17 发布

阅读量1.4k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 7 订阅

订阅专栏

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</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>
      .map:-moz-full-screen {
        height: 100%;
      }
      .map:-webkit-full-screen {
        height: 100%;
      }
      .map:-ms-fullscreen {
        height: 100%;
      }
      .map:fullscreen {
        height: 100%;
      }
      .ol-rotate {
        top: 3em;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></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()
        ]),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.BingMaps({
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
              imagerySet: 'Aerial'
            })
          })
        ],
        target: 'map',
        view: view
      });
    </script>
  </body>
</html>

桃李不言_下自成蹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Full Screen Control——全屏控件

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 theFul
复制链接

扫一扫