iPortal地图大屏自定义组件示例--立体地图

作者：刘大

通过iPortal地图大屏自定义组件要点梳理这篇文章，我们基本了解了地图大屏如何进行自定义，也准备好了开发环境，那我们就接着进行实际操作下吧。
立体建筑实质是mapboxgl中的“fill-extrusion”的类型，感兴趣的同学可以直接查看官方实例Display buildings in 3D,这里我们就不过多阐述，今天我们主要是通过立体建筑示例看自定义组件中如何使用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.实例效果

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