Openlayers示例12 | Custom Overview Map(鷹眼圖)
阿新 • • 發佈：2022-03-23
此示例演示如何使用其支援的選項以及定義自定義 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>