# new ClassBreakRenderer(options)
参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options |
Object | 构造参数 |
|
field |
String | '' | 过滤字段名 |
valueExpressionTitle |
String | 字段表达式描述 |
|
valueExpression |
String | 字段表达式 |
|
defaultVisible |
Boolean | true | 默认符号是否显示 |
classBreakInfos |
Array.<ClassBreakInfo> | [] | 分段专题图字段样式,支持的样式如下: |
defaultSymbol |
Object | 默认样式,当分段值未覆盖时,使用默认样式,支持的样式如下: |
- See:
示例
// ES5引入方式
const { ClassBreakRenderer } = zondy.renderer
const { SimpleMarkerSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { ClassBreakRenderer, SimpleMarkerSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
// 创建分段专题图渲染样式对象
const classBreakRenderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
// 默认样式
defaultSymbol: undefined,
//分段专题图字段样式
classBreakInfos: [{
// 分段最大值
maxValue: 20,
// 分段最小值
minValue: 1,
//匹配到该值后的样式,更多样式详见:《SimpleMarkerSymbol》
symbol: new SimpleMarkerSymbol({
// 填充颜色
color: 'rgba(1,1,252,0)',
// 点半径
size: 13,
// 外边线样式
outline: new SimpleLineSymbol({
//线颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
},{
// 分段最大值
maxValue: 40,
// 分段最大值
minValue: 20,
//匹配到该值后的样式,更多样式详见:《SimpleMarkerSymbol》
symbol: new SimpleMarkerSymbol({
// 填充颜色
color: 'rgba(1,1,252,0)',
// 点半径
size: 13,
// 外边线样式
outline: new SimpleLineSymbol({
//线颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
}]
});
// ES5引入方式
const { ClassBreakRenderer } = zondy.renderer
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { ClassBreakRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
// 创建分段专题图渲染样式对象
const classBreakRenderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
// 默认样式
defaultSymbol: undefined,
//分段专题图字段样式
classBreakInfos: [{
// 分段最大值
maxValue: 20,
// 分段最小值
minValue: 1,
//匹配到该值后的样式,更多样式详见:《SimpleLineSymbol》
symbol: new SimpleLineSymbol({
//线符号颜色
color: new Color(1, 255, 0, 1),
//线宽
width: 2
})
},{
// 分段最大值
maxValue: 40,
// 分段最大值
minValue: 20,
//匹配到该值后的样式,更多样式详见:《SimpleLineSymbol》
symbol: new SimpleLineSymbol({
//线符号颜色
color: new Color(1, 255, 0, 1),
//线宽
width: 2
})
}]
});
// ES5引入方式
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { ClassBreakRenderer, SimpleFillSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
// 创建分段专题图渲染样式对象
const classBreakRenderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
// 默认样式
defaultSymbol: undefined,
//分段专题图字段样式
classBreakInfos: [{
// 分段最大值
maxValue: 20,
// 分段最小值
minValue: 1,
//匹配到该值后的样式,更多样式详见:《SimpleFillSymbol》
symbol: new SimpleFillSymbol({
// 填充符号颜色
color: new Color(111, 222, 0, 0.3),
// 外边线样式
outline: new SimpleLineSymbol({
// 线符号颜色
color: new Color(255, 255, 0, 1),
// 线宽
width: 1
})
})
},{
// 分段最大值
maxValue: 40,
// 分段最大值
minValue: 20,
//匹配到该值后的样式,更多样式详见:《SimpleFillSymbol》
symbol: new SimpleFillSymbol({
// 填充符号颜色
color: new Color(21, 110, 22, 0.3),
// 外边线样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 255, 0, 1),
//线宽
width: 1
})
})
}]
});
// ES5引入方式
const { SimpleMarkerSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
const { ClassBreakRenderer } = zondy.renderer
// ES6引入方式
import { SimpleMarkerSymbol, SimpleLineSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
// 初始化默认样式,更多样式详见:《SimpleMarkerSymbol》
const defaultSymbol = new SimpleMarkerSymbol({
// 填充颜色
color: 'rgba(1,1,252,0)',
// 点半径
size: 13,
// 外边线样式
outline: new SimpleLineSymbol({
//线颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
// 初始化渲染对象
const renderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
//分段专题图字段样式
classBreakInfos: [],
// 默认样式
defaultSymbol: defaultSymbol
})
// ES5引入方式
const { SimpleLineSymbol, SimpleMarkerSymbol } = zondy.symbol
const { Color } = zondy
const { ClassBreakRenderer } = zondy.renderer
// ES6引入方式
import { SimpleLineSymbol, SimpleMarkerSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
// 初始化默认样式,更多样式详见:《SimpleLineSymbol》
const defaultSymbol = new SimpleLineSymbol({
// 填充颜色
color: new Color(255, 0, 0, 1),
// 线宽
width: 2
})
// 初始化渲染对象
const renderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
//分段专题图字段样式
classBreakInfos: [],
// 默认样式
defaultSymbol: defaultSymbol
})
// ES5引入方式
const { SimpleFillSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
const { ClassBreakRenderer } = zondy.renderer
// ES6引入方式
import { SimpleFillSymbol, SimpleLineSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
// 初始化默认样式,更多样式详见:《SimpleFillSymbol》
const defaultSymbol = new SimpleFillSymbol({
// 填充颜色
color: 'rgba(1,1,252,0)',
// 外边线样式
outline: new SimpleLineSymbol({
//线颜色
color: new Color(255, 1, 0, 1),
//线宽
width: 1
})
})
// 初始化渲染对象
const renderer = new ClassBreakRenderer({
//字段名
field: '你的字段名',
//分段专题图字段样式
classBreakInfos: [],
// 默认样式
defaultSymbol: defaultSymbol
})
const renderer = new ClassBreakRenderer({
valueExpression: "$feature.FID * 5",
// 默认样式
defaultSymbol: undefined,
//分段专题图字段样式
classBreakInfos: [
{
// 分段最大值
maxValue: 20,
// 分段最小值
minValue: 1,
//匹配到该值后的样式,更多样式详见:《SimpleFillSymbol》
symbol: new SimpleFillSymbol({
// 填充符号颜色
color: new Color(111, 222, 0, 0.3),
// 外边线样式
outline: new SimpleLineSymbol({
// 线符号颜色
color: new Color(255, 255, 0, 1),
// 线宽
width: 1,
}),
}),
},
{
// 分段最大值
maxValue: 40,
// 分段最大值
minValue: 20,
//匹配到该值后的样式,更多样式详见:《SimpleFillSymbol》
symbol: new SimpleFillSymbol({
// 填充符号颜色
color: new Color(21, 110, 22, 0.3),
// 外边线样式
outline: new SimpleLineSymbol({
//线符号颜色
color: new Color(255, 255, 0, 1),
//线宽
width: 1,
}),
}),
},
],
});
继承关系
成员变量
成员变量概述
名称 | 类型 | 描述 |
---|---|---|
classBreakInfos |
Array.<ClassBreakInfo>
|
|
deconflictionStrategy |
String
|
|
defaultDescription |
String
|
|
defaultLabel |
String
|
|
defaultSymbol |
Symbol
|
|
defaultVisible |
Boolean
|
|
field |
String
|
|
id |
String
|
|
minHybridClusterCount |
Number
|
|
type |
String
|
|
valueExpression |
String
|
|
valueExpression |
String
|
|
valueExpressionTitle |
String
|
|
valueExpressionTitle |
String
|
|
visualVariables |
Array.<VisualVariable>
|
|
成员变量详情
方法
方法概述
名称 | 返回值类型 | 描述 |
---|---|---|
fromJSON |
ClassBreakRenderer
|
|
clone |
ClassBreakRenderer
|
|
fromJSON |
|
|
toJSON |
Object
|
|
方法详情
# static fromJSON(json)
通过json创造ClassBreakRenderer对象
参数
名称 | 类型 | 描述 |
---|---|---|
json |
Object |
新创建的ClassBreakRenderer对象
示例
let classBreakRenderer = ClassBreakRenderer.fromJSON({
// 初始化参数
})