需要注意的是引入如果只有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>