二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件

官网demo地址：

 Custom Overview Map

这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。

首先加载了一个地图。其中 DragRotateAndZoom是一个交互事件，它可以实现按住shift键鼠标拖拽旋转地图。

 const map = new Map({
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
          zIndex: 1,
        }),
      ],
      target: "map",
      view: new View({
        center: [500000, 6000000],
        zoom: 7,
      }),
    });

然后是实例化了OverviewMap类来实现鹰眼地图。

const overviewMapControl = new OverviewM