ClassBreakRenderer

类名 ClassBreakRenderer

# new ClassBreakRenderer(options)

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

参数:

名称	类型	默认值	描述
`options`	Object		构造参数
`field`	String	''	过滤字段名
`valueExpressionTitle`	String		字段表达式描述
`valueExpression`	String		字段表达式
`defaultVisible`	Boolean	true	默认符号是否显示
`normalizationField`	String		归一化的字段，当normalizationType设置为'field'时生效，将数据值除以归一化的字段所表示的属性值作为分段的依据。例如，要素上有面积和人口两个字段，设置normalizationField为'面积'，field设置为'人口'，即可计算出人口密度数据。
`normalizationTotal`	Number		归一化的总数，当normalizationType设置为'percent-of-total'时生效，将数据值除以此值再乘以100作为分段的依据。例如，已知某区域绿地总面积为1000平方米，normalizationType设置为'绿地面积'，即可计算出该要素所在区域的绿地面积占比。
`normalizationType`	String		归一化的类型。目前支持'field'，'log'，'percent-of-total'三种类型。field可以参考normalizationField的说明。normalizationTotal可以参考normalizationTotal的说明。log归一会对数据值进行log10处理。
`classBreakInfos`	Array.<ClassBreakInfo>	[]	分段专题图字段样式，支持的样式如下： `1、点样式` `2、线样式` `3、区样式` 示例如下： [1、分段专题图-点] [2、分段专题图-线] [3、分段专题图-区]
`defaultSymbol`	Object		默认样式，当分段值未覆盖时，使用默认样式，支持的样式如下： `1、点样式` `2、线样式` `3、区样式` 示例如下： [1、默认样式-点] [2、默认样式-线] [3、默认样式-区]

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

继承关系

BaseRenderer

成员变量

类型: Array.<ClassBreakInfo>

# classBreakInfos

classBreakInfos 分段参数

类型: String

# deconflictionStrategy

聚类冲突策略，默认为'none'。'none'表示不设置冲突解决策略，'static'表示采用默认的冲突解决策略。

类型: String

# defaultDescription

默认的描述

类型: String

# defaultLabel

默认的标签

类型: Symbol

# defaultSymbol

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

类型: Boolean

# defaultVisible

是否可视化默认符号

类型: String

# field

field 过滤字段名

类型: String

# readonly id

渲染器id

Inherited From:

BaseRenderer#id

类型: Number

# minHybridClusterCount

最小混合聚合数量。大于等于此值进行混合聚类，小于此值则优先以分组类型聚类。

类型: String

# normalizationField

归一化的字段，当normalizationType设置为'field'时生效，将数据值除以归一化的字段所表示的属性值作为分段的依据。例如，要素上有面积和人口两个字段，设置normalizationField为'面积'，field设置为'人口'，即可计算出人口密度数据。

类型: Number

# normalizationTotal

归一化的总数，当normalizationType设置为'percent-of-total'时生效，将数据值除以此值再乘以100作为分段的依据。例如，已知某区域绿地总面积为1000平方米，normalizationType设置为'绿地面积'，即可计算出该要素所在区域的绿地面积占比。

类型: NormalizationType

# normalizationType

归一化的类型。目前支持'field'，'log'，'percent-of-total'三种类型。field可以参考normalizationField的说明。normalizationTotal可以参考normalizationTotal的说明。log归一会对数据值进行log10处理。

类型: String

# type

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

Overrides:

BaseRenderer#type

类型: String

# valueExpression

字段表达式

类型: String

# valueExpression

字段表达式，默认取'$cluster_count'，默认表示按聚类簇上点的数量作为分段的依据

类型: String

# valueExpressionTitle

字段表达式描述

类型: String

# valueExpressionTitle

字段表达式描述

类型: Array.<VisualVariable>

# visualVariables

视觉变量

方法

# static fromJSON(json)

通过json创造ClassBreakRenderer对象

参数:

名称	类型	描述
`json`	Object

返回值:

新创建的ClassBreakRenderer对象

类型: ClassBreakRenderer

示例

通过json创造ClassBreakRenderer对象

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

# clone()

克隆renderer对象

Overrides:

BaseRenderer#clone

返回值:

克隆后的renderer对象

类型: ClassBreakRenderer

# fromJSON(json)

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

参数:

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

Inherited From:

BaseRenderer#fromJSON

# toJSON()

导出为json对象

Overrides:

BaseRenderer#toJSON

返回值:

json对象

类型: Object

构造函数

成员变量

方法

事件

MapGIS Client for JavaScript API

# new ClassBreakRenderer(options)

参数:

示例

继承关系

成员变量

# classBreakInfos

# deconflictionStrategy

# defaultDescription

# defaultLabel

# defaultSymbol

# defaultVisible

# field

# readonly id

# minHybridClusterCount

# normalizationField

# normalizationTotal

# normalizationType

# type

# valueExpression

# valueExpression

# valueExpressionTitle

# valueExpressionTitle

# visualVariables

方法

# static fromJSON(json)

参数:

示例

# clone()

# fromJSON(json)

参数:

# toJSON()