如何在mapbox-gl-js中根据不同的取值范围和空值为多边形上色？

map.addSource('my-data', {
  type: 'geojson',
  data: 'path_to_geojson_data'
});

map.addLayer({
  id: 'my-layer',
  type: 'fill',
  source: 'my-data',
  paint: {
    'fill-color': [
      'case',
      ['==', ['get', 'value'], null], 'gray',  // 空值颜色
      ['<', ['get', 'value'], 10], 'blue',     // 小于10的取值范围颜色
      ['<', ['get', 'value'], 20], 'green',    // 10到20的取值范围颜色
      ['<', ['get', 'value'], 30], 'yellow',   // 20到30的取值范围颜色
      'red'                                    // 大于等于30的取值范围颜色
    ]
  }
});