经纬志
首页 / OpenLayers / 使用示例

自定义控件

内置控件不够用时,继承 ol.control.Control 传入自己的 DOM 元素,即可得到一个随地图布局的按钮。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

控件构造时创建一个 div 并写入按钮,交给父类的 element 选项。 ol.control.Control 会在加入地图时把元素放进控件容器,退出时自动移除。 按钮点击后调用 view.animate() 回到初始视图,控件本身不持有地图引用。

操作结果
拖动地图后再点「复位」视图平滑回到初始中心与层级
查看右上角自定义按钮叠加在内置缩放控件下方
勾选「按钮文字改为回中心」控件文字更新,布局不跳动

控件元素建议带 ol-control 类名,可直接复用官方的半透明背景与悬停样式。