本文共 1175 字，大约阅读时间需要 3 分钟。

作者：刘大

通过这篇文章，我们基本了解了地图大屏如何进行自定义，也准备好了开发环境，那我们就接着进行实际操作下吧。

立体建筑实质是mapboxgl中的“fill-extrusion”的类型，感兴趣的同学可以直接查看官方实例,这里我们就不过多阐述，今天我们主要是通过立体建筑示例看自定义组件中如何使用map以及属性组件的响应。 ####1.src目录下面新增功能组件以及属性组件 ####2.components.json增加配置

"StereoscopicMap": {    "name": "立体地图",    "type": "StereoscopicMap",      // 属性默认值设置    "defaultProps": {      "fillColor": "#aaa",      "fillOpacity": 0.6    },    "uri": "stereoscopic-map/Component",    "settingUri": "stereoscopic-map/Setting"  },

####3.属性组件

该实例中添加了颜色和透明度,props 对象对应于功能组件中定义的 props对象，默认值是上面components.json中defaultProps进行配置的，属性改变通过$emit(‘change’,…)事件分发 ####4.功能组件 #####4.1 在loaded()里面进行map相关操作 #####4.2 监听属性改变并触发相应方法

watch: {    fillColor() {      this.changeStyle('fill-extrusion-color', this.fillColor)    },    fillOpacity() {      this.changeStyle('fill-extrusion-opacity', this.fillOpacity)    }  }

#####4.3 添加removed(),移除组件时 ，移除相关图层以及变量

removed() {    const layerId = '3D-layer';    if (this.map.getLayer(layerId)) {      this.map.getLayer(layerId) && this.map.removeLayer(layerId);      this.map.getSource(layerId) && this.map.removeSource(layerId);    }    this.map = null;  }

####5.实例效果

除此之外，我们同样可以进行数据切换，以及颜色属性 调用颜色选择器 这些就留个大家自己发挥啦

转载地址：http://gspxi.baihongyu.com/