切换腾讯地图的文字注记
在网上看到了这么个效果,感觉自己以后也会遇到,或者说现有项目可能会扩展这个需求,就先搜集资料探索一下咯~
到时候需求落到身上了就不用慌啦~淡然处之!
预期效果
可手动切换地图底图,且可单独对底图上的文本进行显隐控制
关键思路分析与解读
如何控制底图文本注记的显隐?
腾讯地图 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' })
}
}
// ...
}
}