Openlayers示例20 | Shared Views(共享视图)

Shared Views

两张地图（一张公路，一张影像）共享相同的中心、分辨率和旋转。
需要申请Key

<!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;
    }

    @media (min-width: 800px) {
      .wrapper {
        display: flex;
      }

      .half {
        padding: 0 10px;
        width: 50%;
        float: left;
      }
    }
  </style>
  <title>Shared Views</title>
</head>
<body>
  <div class="wrapper">
    <div class="half">
      <h4>Road</h4>
      <div id="roadMap" class="map"></div>
    </div>
    <div class="half">
      <h4>Aerial</h4>
      <div id="aerialMap" class="map"></div>
    </div>
  </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 roadLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: attributions,
      url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
      tileSize: 512,
      maxZoom: 22,
    }),
  });

  const aerialLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: attributions,
      url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
      maxZoom: 20,
    }),
  });

  const view = new ol.View({
    center: [-6655.5402445057125, 6709968.258934638],
    zoom: 13,
  });

  const map1 = new ol.Map({
    target: 'roadMap',
    layers: [roadLayer],
    view: view,
  });

  const map2 = new ol.Map({
    target: 'aerialMap',
    layers: [aerialLayer],
    view: view,
  });
</script>
</html>