StyleExpress

StyleExpress是由get、case、match、step、boolean等嵌套组成的数组对象，用于动态设置样式。

表达式说明

表达式名	表达式结构	含义	示例
get	`["get", string]`	返回当前要素的属性	`["get", "name"]` 返回当前要素属性name的值
feature-state	`["feature-state", string]`	返回当前要素的状态值，通过方法，人为设置	`['feature-state', 'picked']` 返回当前要素状态picked的值
boolean	`["boolean", value]:boolean ["boolean", value, fallback: value, fallback: value, ...]`	格式化 value 的值为boolean类型，fallback为默认值	`['boolean', ['feature-state', 'picked'], false]` 格式化要素状态picked的值为boolean，失败则返回false
case	`["case", condition: boolean, output: OutputType, condition: boolean, output: OutputType,..., fallback: OutputType]`	类似if else，根据条件判断哪个满足，如果满足返回数据，不满足返回默认数据	`['case', ['boolean', ['feature-state', 'picked'], false], 'yellow', 'red']` 如果picked为true，则返回'yellow'，否则返回'red'
match	`["match",input:InputType(number or string),label: InputType \| [InputType, InputType,...], output: OutputType,label: InputType \|[InputType, InputType,...], output: OutputType,...,fallback: OutputType]`	类似switch case，input为输入值，label为是否相等值，output为如果相等则输出的值，最后的fallback为默认值	`['match', ['get', 'name'], '海淀区', '#ce4848', '房山区', '#6704ff', '朝阳区', 'yellow', '#ff8b1a']` 当前要素的属性name值，如果等于'海淀区'，则输出颜色'#ce4848'；如果等于'房山区'，则输出颜色'#6704ff'；如果等于'朝阳区''，则输出颜色'yellow'；其余输出颜色'#ff8b1a'
step	`["step", input: number, stop_output_0: OutputType, stop_input_1: number, stop_output_1: OutputType, stop_input_n: number, stop_output_n: OutputType, ...]`	类似if else，根据条件判断input数值，如果input小于等于stop_input_1，则输出stop_output_0；如果stop_input_1=stop_input_n,则输出stop_output_n	`['step',['get','age'],'#666',18,'#999',60,'#fff']` 如果属性age<=18，则输出'#666'；如果18=60,则输出'#fff'

方法

方法名	参数	返回值	说明
updateState	1. keys: Array 2. params: Object 3. ifAppend: boolean 是否追加状态添加	无	根据Entity的id+layerName，设置对象状态
clearState	无	无	清空对象状态
setZIndex	number	无	设置图层等级
getZIndex	无	number	获取图层等级
setZIndexTop	无	无	设置图层最顶层
setUpLevel	无	无	设置图层上移一层
setDownLevel	无	无	设置图层下移一层
setStyle	options.style	无	重新设置整体的样式

事件

事件名	回调方法	说明
onclick	function (e) {}	e.value是选中的要素数据Array，默认为null
ondbclick	function (e) {}	e.value是选中的要素数据Array，默认为null
onmousemove	function (e) {}	e.value是选中的要素数据Array，默认为null
onmouseout	function (e) {}	e.value是选中的要素数据Array，默认为null

使用示例

// 根据要素状态设置颜色
const style = {
  fillColor: ['case', 
    ['boolean', ['feature-state', 'picked'], false], 
    '#ff0000',  // 选中状态
    '#0000ff'   // 未选中状态
  ]
};

// 根据属性值设置颜色
const style = {
  fillColor: ['match',
    ['get', 'name'],
    '海淀区', '#ce4848',
    '房山区', '#6704ff',
    '朝阳区', 'yellow',
    '#ff8b1a'  // 默认颜色
  ]
};

// 根据数值范围设置颜色
const style = {
  fillColor: ['step',
    ['get', 'age'],
    '#666',  // age <= 18
    18, '#999',  // 18 < age <= 60
    60, '#fff'   // age > 60
  ]
};

StyleExpress ​

表达式说明 ​

方法 ​

事件 ​

使用示例 ​

StyleExpress

表达式说明

方法

事件

使用示例