mapbox中3d图层的显示与隐藏

由于mapbox加载过慢，所以我没有在初始化的时候添加图层，而是给了一个按钮控制图层的添加与删除，加快地图的加载速度，先看效果



mapbox地图的展示在上一篇博客：https://blog.csdn.net/qq_41186500/article/details/103509936


1、html部分添加一个控制图层显示与隐藏的按钮

<div>
	<el-button @click="add3dLayers">{
    { addLayerFlag }}el-button>
div>
<div id='map'>div>

2、 javascript部分

• 设置按钮初始值为：添加图层
• 添加图层、删除图层用到两个函数：addLayer()、removeLayer()
• 由于添加图层代码较多，我就把添加图层单独拎出来，用到的时候直接调用就行了

data() {
     
	return {
     
		map: {
     },
		addLayerFlag: '添加图层'
	}
},
mounted() {
     
  this.initMap()
  this.initModel()
},
methods: {
     
	// 地图初始化
    initMap() {
     
      mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'

      this.map = new mapboxgl.Map({
     
      	container: 'map'
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [118.78, 32.04],        
      })
    },
	// 添加3d图层的函数
    layer() {
     
      var layers = this.map.getStyle().layers
      var labelLayerId
      for (var i = 0; i < layers.length; i++) {
     
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
     
          labelLayerId = layers[i].id
          break
        }
      }
      // 3d绘制
      this.map.addLayer({
     
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 5,
        'paint': {
     
          'fill-extrusion-color': 'pink', // 建筑颜色
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': [
            'interpolate', ['linear'], ['zoom'],
            15, 0,
            15.05, ['get', 'height']
          ],
          'fill-extrusion-base': [
            'interpolate', ['linear'], ['zoom'],
            15, 0,
            15.05, ['get', 'min_height']
          ],
          'fill-extrusion-opacity': 0.6  // 图层透明度
        }
      }, labelLayerId)
    },
    // 图层开关
    add3dLayers() {
     
      if (this.addLayerFlag === '添加图层') {
     
        this.addLayerFlag = '删除图层'
        this.layer()
      } else if (this.addLayerFlag === '删除图层') {
     
        this.addLayerFlag = '添加图层'
        this.map.removeLayer('3d-buildings')  // 删除图层，括号里是要删除图层的id
      }
    }
}

添加图层是在官网看的例子自己改的，删除方法是看的官方文档找的方法，领导刚让我写这些功能的时候自己百度了半天，最后发现文档上面什么都有，还是要多看文档，看文档真的很重要，此处要强调一百遍啊！！！
附上官方文档的地址

• example地址：https://docs.mapbox.com/mapbox-gl-js/examples/
• API地址：https://docs.mapbox.com/mapbox-gl-js/api/