#### # new ClassBreakRenderer(options)

分段专题图渲染样式，支持的图层如下：
`IGS地图图片图层`、`几何图形图层`、`IGS要素图层`、 `geojson图层`、`OGC-WFS图层`

#### 参数:

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
`options` | Object |  | 构造参数
`field` | String | '' | 过滤字段名
`valueExpressionTitle` | String |  | 字段表达式描述
`valueExpression` | String |  | 字段表达式
`classBreakInfos` | Array | [] | 分段专题图字段样式，支持的样式如下： `1、点样式` `2、线样式` `3、区样式` 示例如下： [1、分段专题图-点] [2、分段专题图-线] [3、分段专题图-区]
`defaultSymbol` | Object |  | 默认样式，当分段值未覆盖时，使用默认样式，支持的样式如下： `1、点样式` `2、线样式` `3、区样式` 示例如下： [1、默认样式-点] [2、默认样式-线] [3、默认样式-区]

See:

  - 表达式

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 9

##### 示例

分段专题图-点

    // 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,
              }),
            }),
          },
        ],
      });

### 继承关系

- BaseRenderer

### 成员变量

类型: Array.<ClassBreakInfo>

#### # classBreakInfos

classBreakInfos 分段参数

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 328

类型: String

#### # defaultDescription

默认的描述

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 369

类型: String

#### # defaultLabel

默认的标签

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 364

类型: Symbol

#### # defaultSymbol

defaultSymbol 默认样式，当分段值未覆盖时，使用默认样式

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 336

类型: String

#### # field

field 过滤字段名

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 323

类型: String

#### # type

查看源代码 common/document/renderer/BaseRenderer.js, line 14

类型: String

#### # type

type 'class-breaks'，分段专题图

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 318

类型: String

#### # valueExpression

字段表达式

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 359

类型: String

#### # valueExpressionTitle

字段表达式描述

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 354

类型: Array.<VisualVariable>

#### # visualVariables

视觉变量(暂不支持)

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 346

### 方法

#### # static fromJSON(json)

通过json创造ClassBreakRenderer对象

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`json` | Object |

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 412

返回值:

新创建的ClassBreakRenderer对象

类型: ClassBreakRenderer

##### 示例

<h7>通过json创造ClassBreakRenderer对象

    let classBreakRenderer = ClassBreakRenderer.fromJSON({
       // 初始化参数
    })

#### # clone()

克隆renderer对象

Overrides:
  - BaseRenderer#clone

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 398

返回值:

克隆后的renderer对象

类型: ClassBreakRenderer

#### # fromJSON(json)

将JSON格式的渲染规则转换为JS对象

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`json` | Object | 渲染规则的实例化JSON

Inherited From:
  - BaseRenderer#fromJSON

查看源代码 common/document/renderer/BaseRenderer.js, line 40

#### # toJSON()

导出为json对象

Overrides:
  - BaseRenderer#toJSON

查看源代码 common/document/renderer/ClassBreakRenderer.js, line 380

返回值:

json对象

类型: Object