mapbox style specification Expressions 具体例子

 

参考官网：

https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/

The value for any layout property, paint property, or filter may be specified as an expression. 
An expression defines a formula for computing the value of the property using the operators described below. 
The set of expression operators provided by Mapbox GL includes:
Mathematical operators for performing arithmetic and other operations on numeric values
Logical operators for manipulating boolean values and making conditional decisions
String operators for manipulating strings
Data operators, providing access to the properties of source features
Camera operators, providing access to the parameters defining the current map view

Expressions are represented as JSON arrays. The first element of an expression array is a string naming the expression operator, e.g. "*" or "case". Elements that follow (if any) are the arguments to the expression. Each argument is either a literal value (a string, number, boolean, or null), or another expression array.

[expression_name, argument_0, argument_1, ...]

下面汇总具体的例子：

['match', ['get', property], inputValue, outputValue if match, outputValue if not a match]
filterDay = ['match', ['get', 'Day'], ['Sat', 'Sun'], false, true];
// 应用多个过滤器
map.setFilter('collisions', ['all', filterHour, filterDay]);

"filter": ['==', ['type',['get', 'key']],'value']
map.setFilter('collisions', ['==', ['number', ['get', 'Hour']], hour]);
filter: ['==', ['number', ['get', 'Hour']], 12]


'circle-color': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'Casualty']],
        0, '#2DC4B2',
        1, '#3BB3C3',
        2, '#669EC4',
        3, '#8B88B6',
        4, '#A2719B',
        5, '#AA5E79'
      ]

// 以下两个语句效果一致 
map.setFilter('jq',['==',['get','jqhour'],'somethingstring']);

map.setFilter('jq',['in','jqhour','smstring']);

'circle-radius': [
    'interpolate',
    ['linear'],
    ['get', 'mag'],
    6,20,
    8,40
]

'fill-opacity': [
    'case',
    ['boolean', ['feature-state', 'hover'], false],
    1,    --true的话，用这个值
    0.5   --false的话，用这个值
]

'circle-radius': [
	'case',
	 ['boolean',['feature-state', 'hover'],false],
	 10,
	 5 
]

'circle-opacity':[
	'case',
	['boolean',['feature-state','hover'],false],
	1,
	0.5
]

'circle-stroke-opacity':[
	'case',
	['boolean',['feature-state','hover'],false],
	1,
	0.2
],
'circle-blur':[
	'case',
	['boolean',['feature-state','hover'],false],
	1,
	0.2
]

'circle-radius':[	            	
	'interpolate',['linear'],['zoom'],
	0,3,
	12,5,
	16,
	['case',
		['<',['get','sl'],10],6,
		['all',['>=',['get','sl'],10],['<',['get','sl'],30]],10,
		['all',['>=',['get','sl'],30],['<',['get','sl'],100]],20,
		['all',['>=',['get','sl'],100],['<',['get','sl'],300]],30,
		['>=',['get','sl'],300],40, 50 ]
],				
				
'circle-radius': [
		'interpolate',['linear'],['zoom'],
		8, ['case',['boolean',['feature-state','hover'],false],3,2],
		10, ['case',['boolean',['feature-state','hover'],false],6,3],
		16, ['case',['boolean',['feature-state','hover'],false],14,10],
		18, ['case',['boolean',['feature-state','hover'],false],34,30],
		22, ['case',['boolean',['feature-state','hover'],false],64,60]
],

 

['-', 2017, ['number', ['get', 'Constructi'], 2017]]

Use a '-' expression with two arguments. The first argument is a number (the current year, 2017). 
The second argument is another expression (a 'number' expression) with two arguments. 
This expression will convert the first argument to a number. 
If the first argument doesn't have a value, then the second argument, the current year 2017, will be used.

[
  '/',
  ['-', 2017, ['number', ['get', 'Constructi'], 2017]],
  10
]

Wrap the expression in one other expression to make the size of the circles look better in this context.
In this case, you'll divide the age of the landmark by 10.

'circle-radius': [
        'interpolate', ['linear'], ['zoom'],
        10, ['/', ['-', 2017, ['number', ['get', 'Constructi'], 2017]], 30],
        13, ['/', ['-', 2017, ['number', ['get', 'Constructi'], 2017]], 10],
      ],

https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/