主要实现对地图zoom级别的自定义

​​Accessible Map​​

这个页面的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>

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。