首页 / OpenLayers / 使用示例
无障碍地图
地图容器可以获得键盘焦点,方向键平移、加减号缩放,视图变化通过 aria-live 区域播报,读屏软件能够读出当前中心与缩放级别。
源码与运行效果
说明
地图容器加上 tabindex="0" 后可以接收键盘焦点,keydown 里把方向键
换算成 view.getCenter() ± resolution × 60 的平移动画,加减号直接调用
view.animate({zoom})。所有视图变化都汇总到
view.on(['change:center','change:resolution']),再写入
role="status" aria-live="polite" 的区域。
读屏软件不会朗读 canvas 里的图形,状态文本要写成「中心 116.3970, 39.9090 · 缩放 11.0」 这类可理解的句子,而不是直接输出墨卡托坐标。
| 操作 | 结果 |
|---|---|
| 点击地图任意位置 | 焦点落到地图容器,可继续用键盘操作 |
| 按 ← → ↑ ↓ | 视图平移,状态文本同步更新 |
| 按 + 或 - | 缩放级别各增减一级 |
焦点框需要可见:给地图容器加 :focus-visible 描边,键盘用户才知道焦点是否落在地图上。