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

场景

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

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

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

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

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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、设置之后