vue+mapbox学习（四）–添加立体数据

准备工作：仍然是准备一份json数据，和之前的geojson差不多：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "level": 1,
        "name": "gym",
        "height": 10,
        "base_height": 0,
        "color": "grey"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              120.56817054748534,
              31.24813094083454
            ],
            [
              120.5695331096649,
              31.24813094083454
            ],
            [
              120.5695331096649,
              31.248828039967144
            ],
            [
              120.56817054748534,
              31.248828039967144
            ],
            [
              120.56817054748534,
              31.24813094083454
            ]
          ]
        ]
      }
    },{
     ...}
     ... // 样例，省略其余
 ]
}

在json数据中的“properties”属性中添加，“ level ”、“name”、“height”、“base_height”、“color”这些属性。而是数据具有立体效果的主要是 “height” 和 “base_height” 。
其中 “height” 决定了该区域的最高高度；而 “base_height” 则是设定以哪个高度为起点，从而实现悬空的效果。

在获取数据后，设置图层“type”为“fill-extrusion”，“paint”属性如下：

axios.get('../data/3d.json').then(res => {
            this.map.on('load', () => {
                this.map.addLayer({
                    id: 'taihu',
                    type: 'fill-extrusion',
                    source: { type: 'geojson', data: res.data },
                    layout: {},
                    paint: {
                        // Get the fill-extrusion-color from the source 'color' property.            
                        'fill-extrusion-color': ['get', 'color'],
                        // Get fill-extrusion-height from the source 'height' property.            
                        'fill-extrusion-height': ['get', 'height'],
                        // Get fill-extrusion-base from the source 'base_height' property.            
                        'fill-extrusion-base': ['get', 'base_height'],
                        // Make extrusions slightly opaque for see through indoor walls.            
                        'fill-extrusion-opacity': 0.5
                    }
                });
            });