一、示例简介
这个示例演示了OpenLayers中鹰眼控件（ol.control.OverviewMap）的使用。
二、代码详解
<!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>Overview Map Control</title>
<link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
<script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
// 加载Open Street Map
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
controls: ol.control.defaults().extend([
new ol.control.OverviewMap() // 创建一个鹰眼控件，并添加到地图的默认控件中
]),
view: new ol.View({
center: [500000, 6000000],
zoom: 7
})
});
</script>
</body>
</html>官方示例地址：http://openlayers.org/en/latest/examples/overviewmap.html