需要注意的是引入如果只有ol.css和ol.js的话,import需要修改
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls, OverviewMap} from 'ol/control.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
官网中这种的在new的时候改为ol.map
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../v5.3.0-dist/ol.css">
<script src="../v5.3.0-dist/ol.js"></script>
<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>