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

客官°小女子只卖身不卖艺 2023-09-30 10:36 6阅读 0赞

## 场景 ##

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

[Vue中使用Openlayers加载Geoserver发布的TileWMS\_霸道流氓气质的博客-CSDN博客][Vue_Openlayers_Geoserver_TileWMS_-CSDN]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][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、设置之后

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_17_color_FFFFFF_t_70_g_se_x_16][]

[Vue_Openlayers_Geoserver_TileWMS_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bb8ae8db913d47ea8498757f7f5db9ac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/468b8605ac55463198cc1928e248bc2e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_17,color_FFFFFF,t_70,g_se,x_16