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

最新推荐文章于 2024-05-28 16:02:54 发布

桃李不言_下自成蹊

最新推荐文章于 2024-05-28 16:02:54 发布

阅读量726

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

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>