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

自定义导航控件

不继承也能加控件,一个 div 加几个按钮就够。

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

说明

自定义控件不需要继承:new ol.control.Control({element}) 接受任意 DOM,按钮回调里调用视图动画即可。

示例在左上角放放大、缩小、复位、正北四个按钮,右下角浮层显示旋转角度。默认控件里的缩放按钮被关掉,避免功能重复。

要点

  • 控件元素自己处理点击,stopEvent 默认为真不会传到地图。
  • view.animate 支持同时改中心与缩放。
  • 旋转角以弧度存储,显示时要转成角度。

控件里用 button 而不是 div,键盘可聚焦,操作更顺。