mapbox 加载json数据 和数据中颜色 和高度 并根据数值加载颜色

代码

   //添加geojson数据
        map.on('load', function () {
            map.addLayer({
                'id': 'room-extrusion',
                'type': 'fill-extrusion',
                'source': {
                    'type': 'geojson',
                    'data': './json/gd.json',
                },

                // //绘画功能
                'paint': {
                    // Get the fill-extrusion-color from the source 'color' property.   从source 'color'属性获取fill- extrusive -color。  
                    // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
                    // "fill-extrusion-color":['get','color'],//加载数据中的颜色
                    'fill-extrusion-color': {//根据数值中加载相对应颜色
                        property: "height", // this will be your density property form you geojson
                        stops: [
                            [0, "#ffd0a6"],
                            [10, "#ffd0a6"],
                            [100, "#ffaa7f"],
                            [500, "#ff704e"],
                            [1000, "#f04040"],
                            [10000, "#b50a09"]
                        ]
                    },
                    //    从source 'height'属性获取填充-挤出-高度。  
                    'fill-extrusion-height': ['get', 'height'],
                    'fill-extrusion-opacity': 1
                  
                }
            });
      

        });
    

加载数据

  'source': {
                    'type': 'geojson',
                    'data': './json/gd.json',
                },

加载数据中的颜色

    // "fill-extrusion-color":['get','color'],//加载数据中的颜色
【color 是 数据中的属性】

加载数据中的高度

                    'fill-extrusion-height': ['get', 'height'],
                    【geight是 数据中的高属性】，没有的话 可以写一个属性

根据数值判断添加不同颜色

 'fill-extrusion-color': {//根据数值中加载相对应颜色
                        property: "height", // this will be your density property form you geojson
                        stops: [
                            [0, "#ffd0a6"],
                            [10, "#ffd0a6"],
                            [100, "#ffaa7f"],
                            [500, "#ff704e"],
                            [1000, "#f04040"],
                            [10000, "#b50a09"]
                        ]
                    },