Openlayers示例14 | Full Screen Control(全屏查看)

Full Screen Control

单击右上角的控件以全屏显示。再次单击它以退出全屏。

如果地图上没有按钮，则您的浏览器不支持Full Screen API。

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 500px;
    }

    .map:-webkit-full-screen {
      height: 100%;
      margin: 0;
    }

    .map:-ms-fullscreen {
      height: 100%;
    }

    .map:fullscreen {
      height: 100%;
    }

    .map .ol-rotate {
      top: 3em;
    }
  </style>
  <title>Full Screen Control</title>
</head>
<body>
  <div id="map" class="map"></div>
</body>
<script>
  const view = new ol.View({
    center: [-9101767, 2822912],
    zoom: 14,
  });

  const key = 'Get your own API key at https://www.maptiler.com/cloud/';
  const attributions =
    '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
    '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

  const map = new ol.Map({
    controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
    layers: [
      new ol.layer.Tile({
        source:new ol.source.OSM()
        // source: new XYZ({
        //   attributions: attributions,
        //   url:
        //     'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
        //   maxZoom: 20,
      //   }),
      }),
    ],
    target: 'map',
    view: view,
  });
</script>
</html>