mapbox expressions

["step",
    input: number,
    stop_output_0: OutputType,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType


// with three steps to implement three types of circles:
//   * Blue, 20px circles when point count is less than 100
//   * Yellow, 30px circles when point count is between 100 and 750
//   * Pink, 40px circles when point count is greater than or equal to 750
"circle-color": [
"step",
["get", "point_count"],
"#51bbd6",
100,
"#f1f075",
750,
"#f28cb1"
]

// if point_count<100
//    then color="#51bbd6"
//    if point_count>100 and point_count<750 
//    then color="#f1f075"
//    if point_count>750 
//    then color="#f28cb1"


"circle-radius": [
"step",
["get", "point_count"],
20,  //像素值
100, //输入值
30,  //像素值
750, //输入值
40   //像素值
]
// if point_count<100
//    then radius=20
//    if point_count>100 and point_count<750 
//    then radius=30
//    if point_count>750 
//    then radius=40

//没看懂怎么用
["interpolate-lab",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2 ],
    input: number,
    stop_input_1: number, stop_output_1: Color,
    stop_input_n: number, stop_output_n: Color, ...
]: Color

["interpolate-hcl",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2 ],
    input: number,
    stop_input_1: number, stop_output_1: Color,
    stop_input_n: number, stop_output_n: Color, ...
]: Color

{
    "circle-radius": [
        "interpolate", ["linear"], ["zoom"],
        // zoom is 5 (or less) -> circle radius will be 1px
        5, 1,
        // zoom is 10 (or greater) -> circle radius will be 5px
        10, 5
    ]
}

//if zoom<=5 then radius=1
//if zoom>=10 then radius=5
//if 5<zoom<10 then radis根据插值获取



{
  "circle-color": {
    "property": "temperature",
    "stops": [

      // "temperature" is 0   -> circle color will be blue
      [0, 'blue'],

      // "temperature" is 100 -> circle color will be red
      [100, 'red']

    ]
  }
}


{
  "circle-radius": {
    "property": "rating",
    "stops": [

      // zoom is 0 and "rating" is 0 -> circle radius will be 0px
      [{zoom: 0, value: 0}, 0],

      // zoom is 0 and "rating" is 5 -> circle radius will be 5px
      [{zoom: 0, value: 5}, 5],

      // zoom is 20 and "rating" is 0 -> circle radius will be 0px
      [{zoom: 20, value: 0}, 0],

      // zoom is 20 and "rating" is 5 -> circle radius will be 20px
      [{zoom: 20, value: 5}, 20]

    ]
  }
}

["rgb", number, number, number]: color
["-", a_number, b_number]: number//a_number-b_number
["*", a, b, ...]: number // a*b*c
["/", a, b]: number // a/b
["%", a, b]: number // a%b
["-", number]: number //-number
["^", number, number]: number
["+", number, number, ...]: number
["abs", number]: number
["acos", number]: number
["asin", number]: number
["atan", number]: number
["ceil", number]: number  //向上取整
["cos", number]: number
["e"]: number
["floor", number]: number  //向下取整
["ln", number]: number
["ln2"]: number
["max", number, number, ...]: number
["min", number, number, ...]: number
["pi"]: number
["round", number]: number
["sin", number]: number
["sqrt", number]: number
["tan", number]: number
["zoom"]: number
["heatmap-density"]: number
{
    "circle-color": [
        "rgb",
        // red is higher when feature.properties.temperature is higher
        ["get", "temperature"],
        // green is always zero
        0,
        // blue is higher when feature.properties.temperature is lower
        ["-", 100, ["get", "temperature"]]
    ]
}

//https://observablehq.com/@roblabs/mapbox-data-driven-styling-of-circles
['#fff5f0','#fee0d2','#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']

  "circle-color": {
              "property": "circle-data",
              "stops": [
                [10, "#fff5f0"],
                [20, "#fee0d2"],
                [30, "#fcbba1"],
                [40, "#fc9272"],
                [50, "#fb6a4a"],
                [60, "#ef3b2c"],
                [70, "#cb181d"],
                [80, "#a50f15"],
                [90, "#67000d"]
              ]
            }