首页 / OpenLayers / 使用示例
自定义地图控件
继承 ol.control.Control，把显示缩放与中心坐标的面板挂到地图右上角，随视图变化更新。
源码与运行效果
说明
自定义控件的最小实现是一条继承链：继承 ol.control.Control，
在构造函数里把一个 DOM 元素交给 super({element})，
然后 map.addControl() 挂载。控件被放进地图的浮层容器，
绝对定位即可固定在角上。
控件本身不监听事件，数值更新由外部订阅 view 的
change:center 与 change:resolution 完成；
面板加了 role="status"，读屏软件也能读到变化的缩放级别。
| 操作 | 结果 |
|---|---|
| 拖动或缩放地图 | 右上角面板的缩放与中心实时变化 |
| 查看浮层层级 | 面板与默认缩放按钮同时存在，互不遮挡 |
| 鼠标移到面板上 | 不拦截地图事件（pointer-events 为 none） |
控件元素默认会随地图容器尺寸变化重新定位，需要额外样式时优先改控件自身的类名，而不是直接改 ol-control 基础类。