在底图不变的基础上，切换腾讯地图的文字注记（让底图更“干净”）

目录

• 切换腾讯地图的文字注记
• 预期效果
  • 关键思路分析与解读
    • 如何控制底图文本注记的显隐？
    • 如何判断当前是什么底图？
  • 示例代码

切换腾讯地图的文字注记

在网上看到了这么个效果，感觉自己以后也会遇到，或者说现有项目可能会扩展这个需求，就先搜集资料探索一下咯~

到时候需求落到身上了就不用慌啦~淡然处之！

预期效果

可手动切换地图底图，且可单独对底图上的文本进行显隐控制

关键思路分析与解读

如何控制底图文本注记的显隐？

腾讯地图 JavascriptAPI GL 的底图由多种元素（多个要素图层）叠加渲染形成，支持设置使用一个或多个元素（要素图层）来进行底图的渲染。

常用的底图类型一般是矢量图、卫星图

• VectorBaseMap 对象规范
  • features 属性传入数组，则只显示数组里的要素
  • 只显示矢量图的基本信息（不显示文本注记）：this.map.setBaseMap({ type: 'vector', features: ['base', 'building2d'] })
    • 矢量图的要素类型：底面（base）、建筑物（building3d）、建筑物平面(building2d)、poi文字（point）、道路文字（label）
  • 只显示卫星图的基本信息（不显示注记）：this.map.setBaseMap({ type: 'satellite', features: ['base'] })
    • 卫星图的要素类型：卫星影像图（base）、路网图（road），路网图要素里包含了文本注记

如何判断当前是什么底图？

• map.getBaseMap() 可以获取到当前的底图对象，借此来实现地图文本标记的控制
  • this.map.getBaseMap().type == 'satellite' ：判断当前底图是不是卫星图
  • 当然切换底图的时候也可以通过 this.map.getBaseMap().features 来判断文本标注是显示的还是隐藏的，来达到地图文字标注只是通过 显示标注 来控制显隐的效果
• 也可以通过变量来管理展示的底图类型，就不需要通过 api 去获取底图类型了
  • isSatellite：是否开启卫星图

示例代码

• 选中显示标注调用 showBaseMapText 方法
• 取消选中调用 hideBaseMapText 方法

export default {
  // ...
  methods: {
      // 隐藏底图的文本标注
      hideBaseMapText() {
        if (this.map.getBaseMap().type == 'satellite') {
          this.map.setBaseMap({ type: 'satellite', features: ['base'] })
        } else {
          this.map.setBaseMap({ type: 'vector', features: ['base', 'building2d'] })
        }
      },
          
      // 显示底图的文本标注（不传 features 默认显示所有要素）
      showBaseMapText() {
        if (this.map.getBaseMap().type == 'satellite') {
          this.map.setBaseMap({ type: 'satellite' })
        } else {
          this.map.setBaseMap({ type: 'vector' })
        }
      }
      
      // ...
  }
}