Openlayers示例13 | Custom Overview Map(鹰眼图)

Custom Overview Map

此示例演示如何使用其支持的选项以及定义自定义 CSS 来自定义鹰眼图控件。您还可以使用 shift 键旋转地图以查看鹰眼图的反应。

<!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 .ol-custom-overviewmap,
    .map .ol-custom-overviewmap.ol-uncollapsible {
      bottom: auto;
      left: auto;
      right: 0;
      top: 0;
    }

    .map .ol-custom-overviewmap:not(.ol-collapsed) {
      border: 1px solid black;
    }

    .map .ol-custom-overviewmap .ol-overviewmap-map {
      border: none;
      width: 300px;
    }

    .map .ol-custom-overviewmap .ol-overviewmap-box {
      border: 2px solid red;
    }

    .map .ol-custom-overviewmap:not(.ol-collapsed) button {
      bottom: auto;
      left: auto;
      right: 1px;
      top: 1px;
    }

    .map .ol-rotate {
      top: 170px;
      right: 0;
    }
  </style>
  <title>Custom Overview Map</title>
</head>
<body>
  <div id="map" class="map"></div>
  <div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>
</body>
<script>
  const rotateWithView = document.getElementById('rotateWithView');

  const overviewMapControl = new ol.control.OverviewMap({
    // 查看overviewmap-custom.html中使用的自定义CSS
    className: 'ol-overviewmap ol-custom-overviewmap',
    layers: [
      new ol.layer.Tile({
        source:new ol.source.OSM()
        // source: new ol.source.OSM({
        //   'url':
        //     'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
        //     '?apikey=Your API key from https://www.thunderforest.com/docs/apikeys/ here',
        // }),
      }),
    ],
    collapseLabel: '\u00BB',
    label: '\u00AB',
    collapsed: false,
  });

  rotateWithView.addEventListener('change', function () {
    overviewMapControl.setRotateWithView(this.checked);
  });

  const map = new ol.Map({
    controls: ol.control.defaults().extend([overviewMapControl]),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
      }),
    ],
    target: 'map',
    view: new ol.View({
      center: [500000, 6000000],
      zoom: 7,
    }),
  });
</script>
</html>