首页 / OpenLayers / 使用示例
自定义控件
内置控件不够用时,继承 ol.control.Control 传入自己的 DOM 元素,即可得到一个随地图布局的按钮。
源码与运行效果
说明
控件构造时创建一个 div 并写入按钮,交给父类的 element 选项。
ol.control.Control 会在加入地图时把元素放进控件容器,退出时自动移除。
按钮点击后调用 view.animate() 回到初始视图,控件本身不持有地图引用。
| 操作 | 结果 |
|---|---|
| 拖动地图后再点「复位」 | 视图平滑回到初始中心与层级 |
| 查看右上角 | 自定义按钮叠加在内置缩放控件下方 |
| 勾选「按钮文字改为回中心」 | 控件文字更新,布局不跳动 |
控件元素建议带 ol-control 类名,可直接复用官方的半透明背景与悬停样式。