今天在学习Openlayers的多源数据加载WMS时，顺便测试了一下各个地图控件的使用，没想到发现了一个有趣的问题：
当source中引入Geoserver发布的地图资源时，鹰眼图可能无法正确显示，出现下图所示的这种情况：
这种情况的原因是主地图和鹰眼图的坐标系不同。因为直接添加OverviewMap控件会使用默认的坐标系，而这未必与数据源的投影坐标相同。
根据官网文档，我们可以在new ol.control.OverviewMap后面加参数，添上map所对应的layer，从而保证与数据源的投影坐标一致。
学习的代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单一图像WMS</title>
<style>
#map {
width: 1000px;
height: 400px;
}
</style>
<link rel="stylesheet" href="../v6.4.3/css/ol.css" />
<script src="../v6.4.3/build/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new ol.Map({
target: ‘map‘,
layers: [
new ol.layer.Tile({ // 底图
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: ‘https://ahocevar.com/geoserver/wms‘, // WMS服务的URL
params: { // WMS请求参数
‘LAYERS‘: ‘topp:states‘ // 请求的图层名
},
ratio: 1, // 1表示请求的图像是地图视图的大小。
serverType: ‘geoserver‘ // 服务器类型
})
})
],
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
}),
controls: ol.control.defaults().extend([
new ol.control.ScaleLine(),
new ol.control.MousePosition(),
new ol.control.FullScreen(),
new ol.control.Attribution(),
new ol.control.OverviewMap({ // 这里直接加无法正确显示鹰眼图
layers: [
new ol.layer.Tile({ // 底图
source: new ol.source.OSM(),
})]
}),
new ol.control.Rotate(),
new ol.control.ZoomSlider(),
new ol.control.ZoomToExtent(),
new ol.control.Zoom()
])
});
</script>
</body>
</html>
参考：https://blog.csdn.net/u013420816/article/details/53868905
ol.control.OverviewMap无法正常显示的解决方案
原文：https://www.cnblogs.com/yonniye/p/14316120.html