效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../ol3/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="../ol3/ol.css">
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
.ol-custom-overviewmap,
.ol-custom-overviewmap-map.ol-uncollapsible {
left: auto;
right: 0;
top: 0;
height: 150px;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
height: 155px;
}
.ol-custom-overviewmap .ol-overviewmap {
border: none;
width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button {
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var overviewMapControl = new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
})
],
collapseLabel: '\u00BB',
label: '\u00AB',
collapsed: false
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [1200000, 4000000],
zoom: 8
}),
controls: ol.control.defaults().extend([overviewMapControl])
});
</script>
</body>
</html>