VitePress + OpenLayers

地图控件 ​

无障碍访问（Accessible Map）：键盘可聚焦的地图，配合外部按钮实现缩放。

main.js
js
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import TileLayer from 'ol/layer/Tile.js'
import OSM from 'ol/source/OSM.js'

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
})

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)
}
index.html
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Accessible Map</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>

    <script type="module" src="main.js"></script>
  </body>
</html>
package.json
json
{
  "name": "accessible",
  "dependencies": {
    "ol": "10.10.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}