Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件

场景

Vue中使用Openlayers加载Geoserver发布的TileWMS：

​​Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客

在上面的基础上实现加载地图显示，默认会在地图上显示一些放大缩小旋转的控件

怎样去掉默认的这些控件不显示。

注：

实现

1、初始化地图时设置controls属性中默认组件的zoom等为false

//加载控件到地图容器中
                        controls: defaultControls({
                            zoom: false,
                            rotate: false,
                            attribution: false
                        })

2、需要引入defaultControls

import { defaults as defaultControls} from 'ol/control';

3、完整代码

this.map = new Map({
                        layers: [this.layers, this.lineLayer],
                        target: "gjMap",
                        view: new View({
                            projection: "EPSG:900913",
                            center: [3820.708903118605, 5340.244776023301],
                            zoom: 14.5,
                            maxZoom: 19,
                            minZoom: 14,
                        }),                 
                        //加载控件到地图容器中
                        controls: defaultControls({
                            zoom: false,
                            rotate: false,
                            attribution: false
                        })
                    });

4、设置之后