当前位置：网站首页>OpenLayers实例-Accessible Map-可访问的地图

OpenLayers实例-Accessible Map-可访问的地图

2022-07-23 20:04:00 【GISer小辉】

Accessible Map-可访问的地图

知识要点

（主要）在map元素上初始化地图后，默认情况下，map元素是无法被聚焦的，我们可以设置map元素的tabindex属性为“0”，这样就能聚焦了。
（主要）完成以上设置后，需要选中map元素才能对地图进行默认操作，如：滚轮放大缩小，键盘平移等。

官网原文及译文

This page’s map element has its tabindex attribute set to “0”, that makes it focusable. To focus the map element you can either navigate to it using the “tab” key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
将页面的map元素的tabindex属性设置为“0”，使得它可以聚焦（focus）。想要聚焦map元素，您可以使用“tab”键导航到它，也可以使用a标签跳转。当map元素被聚焦时，可以使用+和-键来放大和缩小地图，可以使用方向键来平移地图。
Clicking on the “Zoom in” and “Zoom out” buttons below the map zooms the map in and out. You can navigate to the buttons using the “tab” key, and press the “enter” key to trigger the zooming action.
点击地图下方的“放大”和“缩小”按钮，可以放大和缩小地图。您可以使用“tab”键导航到按钮，并按“enter”键触发缩放动作。

源码

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/css/ol.css"
    type="text/css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
    
      width: 100%;
      height: 400px;
    }

    .btns {
    
      padding: 10px;
      display: flex;
      justify-content: center;
    }

    #map:focus {
    
      outline: #4A74A8 solid 0.15em;
    }
  </style>
  <title>Accessible Map-可访问的地图</title>
</head>

<body>
  <!-- html代码 -->
  <div class="btns">
    <a href="#map">跳转到地图</a>
  </div>
  <div id="map" class="map" tabindex="0"></div>
  <div class="btns">
    <button id="zoom-in">放大</button>
    <button id="zoom-out">缩小</button>
  </div>
  <!-- script代码 -->
  <script>
    // 初始化地图
    const map = new ol.Map({
    
      // 设置图层
      layers: [
        new ol.layer.Tile({
    
          source: new ol.source.OSM(),
        }),
      ],
      // 设置绑定的页面元素
      target: 'map',
      // 设置视图
      view: new ol.View({
    
        center: [0, 0],
        zoom: 2,
      }),
    });

    // 为zoom-out绑定点击事件
    document.getElementById('zoom-out').onclick = function () {
    
      // 获取视图对象
      const view = map.getView();
      // 获取当前缩放层级数
      const zoom = view.getZoom();
      // 设置视图缩放层级数为当前层级数-1，即缩小1级
      view.setZoom(zoom - 1);
    };

    // 为zoom-in绑定点击事件
    document.getElementById('zoom-in').onclick = function () {
    
      // 获取视图对象
      const view = map.getView();
      // 获取当前缩放层级数
      const zoom = view.getZoom();
      // 设置视图缩放层级数为当前层级数+1，即放大1级
      view.setZoom(zoom + 1);
    };
  </script>
</body>

</html>