openlayer 鹰眼插件
此示例演示如何使用其支持的选项自定义overviewmap控件以及定义自定义CSS。您还可以使用shift键旋转地图，以查看总览图的反应方式
<!DOCTYPE html><html>
<head>
<title>Custom Overview Map</title>
<link rel=”stylesheet“ href=”https://openlayers.org/en/v5.1.3/css/ol.css“ type=”text/css“>
<!– The line below is only needed for old environments like Internet Explorer and Android 4.x –>
<script src=”https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL“></script>
<style>
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
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;
}
.ol-rotate {
top: 170px;
right: 0;
}
</style>
</head>
<body>
<div id=”map“ class=”map“></div>
<script>
import Map from ‘ol/Map.js’;
import View from ‘ol/View.js’;
import {defaults as defaultControls, OverviewMap} from ‘ol/control.js’;
import {defaults as defaultInteractions, DragRotateAndZoom} from ‘ol/interaction.js’;
import TileLayer from ‘ol/layer/Tile.js’;
import OSM from ‘ol/source/OSM.js’;
var overviewMapControl = new OverviewMap({
// see in overviewmap-custom.html to see the custom CSS used
className: ‘ol-overviewmap ol-custom-overviewmap’,
layers: [
new TileLayer({
source: new OSM({
‘url’: ‘https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png’ +
‘?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here’
})
})
],
collapseLabel: ‘\u00BB’,
label: ‘\u00AB’,
collapsed: false
});
var map = new Map({
controls: defaultControls().extend([
overviewMapControl
]),
interactions: defaultInteractions().extend([
new DragRotateAndZoom()
]),
layers: [
new TileLayer({
source: new OSM()
})
],
target: ‘map’,
view: new View({
center: [500000, 6000000],
zoom: 7
})
});
</script>
</body></html>
转载自：https://blog.csdn.net/qq_36178899/article/details/81213710
