如何使用OpenLayers 6.5.0移除HTML应用中的缩放按钮？

这些放大缩小按钮是OpenLayers在运行时动态生成的DOM元素，所以不会出现在你的代码源码里，你可以用以下几种方法移除它们：

方法一：初始化地图时禁用默认缩放控件 #

创建地图实例时，通过controls配置项排除默认的缩放控件：

const map = new ol.Map({
  target: 'map',
  // 只保留其他默认控件，去掉缩放控件；若要清空所有默认控件，直接用[]即可
  controls: ol.control.defaults().extend([]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
  })
});

方法二：用CSS直接隐藏按钮 #

利用OpenLayers给缩放按钮设置的固定类名，通过CSS隐藏：

.ol-zoom-in, .ol-zoom-out {
  display: none !important;
}

方法三：初始化后动态移除控件 #

如果地图已经初始化，可通过API找到缩放控件并移除：

// 获取地图的所有控件集合
const controls = map.getControls();
// 遍历找到Zoom控件并移除
controls.forEach(control => {
  if (control instanceof ol.control.Zoom) {
    controls.remove(control);
  }
});

内容的提问来源于stack exchange，提问作者rohan thombre