Openlayer 示例1 | Accessible Map
阿新 • • 發佈：2022-03-20
這個頁面的map元素的tabindex屬性設定為“0”，這使得它可以聚焦。要聚焦map元素，您可以使用“tab”鍵導航到它，也可以使用skip連結。當map元素被聚焦時，可以使用+和-鍵來放大和縮小，可以使用方向鍵來平移。
點選地圖下方的“放大”和“縮小”按鈕，可以放大和縮小地圖。您可以使用“tab”鍵導航到按鈕，並按“enter”鍵觸發縮放動作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Accessible Map</title> <link rel="stylesheet" type="text/css" href="../libs/ol.css"/> <style> .map { width: 100%; height:500px; } #map:focus { outline: #4A74A8 solid 0.15em; } </style> </head> <body> <div id="map" class="map" tabindex="0"></div> <button id="zoom-out">Zoom out</button> <button id="zoom-in">Zoom in</button> <!-- <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script> --> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"> --> <script src="../libs/ol.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const map = new ol.Map({ controls:ol.control.defaults({ attribution:false, }), layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), ], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([110, 39]), // center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"), zoom: 4, }), }); document.getElementById('zoom-out').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom - 1); }; document.getElementById('zoom-in').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom + 1); }; </script> </body> </html>