Openlayers示例13 | Custom Overview Map(鹰眼图)
此示例演示如何使用其支持的选项以及定义自定义 CSS 来自定义鹰眼图控件。您还可以使用 shift 键旋转地图以查看鹰眼图的反应。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- css代码 -->
<style>
.map {
width: 100%;
height: 500px;
}
.map .ol-custom-overviewmap,
.map .ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.map .ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.map .ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
.map .ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.map .ol-custom-overviewmap:not(.ol-collapsed) button {
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
.map .ol-rotate {
top: 170px;
right: 0;
}
</style>
<title>Custom Overview Map</title>
</head>
<body>
<div id="map" class="map"></div>
<div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>
</body>
<script>
const rotateWithView = document.getElementById('rotateWithView');
const overviewMapControl = new ol.control.OverviewMap({
// 查看overviewmap-custom.html中使用的自定义CSS
className: 'ol-overviewmap ol-custom-overviewmap',
layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
// source: new ol.source.OSM({
// 'url':
// 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
// '?apikey=Your API key from https://www.thunderforest.com/docs/apikeys/ here',
// }),
}),
],
collapseLabel: '\u00BB',
label: '\u00AB',
collapsed: false,
});
rotateWithView.addEventListener('change', function () {
overviewMapControl.setRotateWithView(this.checked);
});
const map = new ol.Map({
controls: ol.control.defaults().extend([overviewMapControl]),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
target: 'map',
view: new ol.View({
center: [500000, 6000000],
zoom: 7,
}),
});
</script>
</html>
