vue+mapbox学习（4）--添加立体数据

准备工作：仍然是准备一份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          }        });      });    });