Openlayers示例15 | Full Screen Drag, Rotate, and Zoom(全屏拖动、旋转和缩放)

Full Screen Drag, Rotate, and Zoom

按住Shift+Drag可旋转和缩放。点击右上角的按钮进入全屏。然后再做这Shift+Drag件事。

如果地图上没有按钮，则您的浏览器不支持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:400px;
      }
      .map:-webkit-full-screen {
        height: 100%;
        margin: 0;
      }
      .map:-ms-fullscreen {
        height: 100%;
      }
      .map:fullscreen {
        height: 100%;
      }
      /* position the rotate control lower than usual */
      .map .ol-rotate {
        top: 3em;
      }
  </style>
  <title>Full Screen Drag, Rotate, and Zoom</title>
</head>
<body>
  <div id="map" class="map"></div>
</body>
<script>
  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()]),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
        // source: new ol.source.XYZ({
        //   attributions: attributions,
        //   url:
        //     'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
        //   maxZoom: 20,
        // }),
      }),
    ],
    target: 'map',
    view: new ol.View({
      center: [-33519607, 5616436],
      rotation: -Math.PI / 8,
      zoom: 8,
    }),
  });
</script>
</html>
posted @ 2022-03-23 10:27  槑孒  阅读(331)  评论(0)    收藏  举报