Class: UniqueValueRenderer

UniqueValueRenderer

new UniqueValueRenderer(options)

document/renderer/UniqueValueRenderer.js, line 8

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

Name Type Description
options Object

构造参数

Name Type Default Description
field String '' 可选

字段名
valueExpressionTitle String 可选

字段表达式描述
valueExpression String 可选

字段表达式
defaultVisible Boolean true 可选

默认符号是否显示
uniqueValueInfos Array.<UniqueValueInfo> [] 可选

单值专题图字段样式，支持的样式如下：
1、点样式
2、线样式
3、区样式
示例如下：
[1、单值专题图-点]
[2、单值专题图-线]
[3、单值专题图-区]
defaultSymbol Object 可选

默认样式，当分段值未覆盖时，使用默认样式，支持的样式如下：
1、点样式
2、线样式
3、区样式
示例如下：
[1、默认样式-点]
[2、默认样式-线]
[3、默认样式-区]
See:

  • 表达式

Examples

默认样式-点

// ES5引入方式
const { SimpleMarkerSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
const { UniqueValueRenderer } = zondy.renderer
// ES6引入方式
import { SimpleMarkerSymbol, SimpleLineSymbol, Color, UniqueValueRenderer } 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 UniqueValueRenderer({
  //字段名
  field: '你的字段名',
  //单值专题图字段样式
  uniqueValueInfos: [],
  // 默认样式
  defaultSymbol: defaultSymbol
})

默认样式-线

// ES5引入方式
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
const { UniqueValueRenderer } = zondy.renderer
// ES6引入方式
import { SimpleLineSymbol, Color, UniqueValueRenderer } from "@mapgis/webclient-common"
// 初始化默认样式，更多样式详见：《SimpleLineSymbol》
const defaultSymbol = new SimpleLineSymbol({
  // 填充颜色
  color: new Color(255, 0, 0, 1),
  // 线宽
  width: 2
})
// 初始化渲染对象
const renderer = new UniqueValueRenderer({
  //字段名
  field: '你的字段名',
  //单值专题图字段样式
  uniqueValueInfos: [],
  // 默认样式
  defaultSymbol: defaultSymbol
})

默认样式-区

// ES5引入方式
const { SimpleFillSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
const { UniqueValueRenderer } = zondy.renderer
// ES6引入方式
import { SimpleFillSymbol, SimpleLineSymbol, Color, UniqueValueRenderer } from "@mapgis/webclient-common"
// 初始化默认样式，更多样式详见：《SimpleFillSymbol》
const defaultSymbol = new Symbol.SimpleFillSymbol({
  // 填充颜色
  color: 'rgba(1,1,252,0)',
  // 外边线样式
  outline: new Symbol.SimpleLineSymbol({
    //线颜色
    color: new Color(255, 1, 0, 1),
    //线宽
    width: 1
  })
})
// 初始化渲染对象
const renderer = new Renderer.UniqueValueRenderer({
  //字段名
  field: '你的字段名',
  //单值专题图字段样式
  uniqueValueInfos: [],
  // 默认样式
  defaultSymbol: defaultSymbol
})

单值专题图-点

// ES5引入方式
const { UniqueValueRenderer } = zondy.renderer
const { SimpleMarkerSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { UniqueValueRenderer, SimpleMarkerSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
//创建单值专题图渲染样式对象，更多样式详见：《SimpleMarkerSymbol》
let uniqueRender = new UniqueValueRenderer({
    //字段名
    field: '你的字段名',
    // 默认样式
    defaultSymbol: undefined,
    //单值专题图字段样式
    uniqueValueInfos: [{
        //指定字段值1
        value: "字段值1",
        //匹配到该值后的样式
        symbol: new SimpleMarkerSymbol({
          // 填充颜色
          color: 'rgba(1,1,252,0)',
          // 点半径
          size: 13,
          // 外边线样式
          outline: new SimpleLineSymbol({
            //线颜色
            color: new Color(255, 1, 0, 1),
            //线宽
            width: 1
          })
        })
    },{
        //指定字段值2
        value: "字段值2",
        //匹配到该值后的样式
        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 { UniqueValueRenderer } = zondy.renderer
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { UniqueValueRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
//创建单值专题图渲染样式对象，更多样式详见：《SimpleLineSymbol》
let uniqueRender = new UniqueValueRenderer({
    //字段名
    field: '你的字段名',
    // 默认样式
    defaultSymbol: undefined,
    //单值专题图字段样式
    uniqueValueInfos: [{
        //指定字段值1
        value: "字段值1",
        //匹配到该值后的样式
        symbol: new SimpleLineSymbol({
            //线符号颜色
            color: new Color(255, 0, 0, 1),
            //线宽
            width: 1
        })
    },{
        //指定字段值2
        value: "字段值2",
        //匹配到该值后的样式
        symbol: new SimpleLineSymbol({
            //线符号颜色
            color: new Color(1, 255, 0, 1),
            //线宽
            width: 2
        })
    }]
});

单值专题图-区

// ES5引入方式
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol, SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { UniqueValueRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
//创建单值专题图渲染样式对象，更多样式详见：《SimpleFillSymbol》
let uniqueRender = new UniqueValueRenderer({
    //字段名
    field: '你的字段名',
    // 默认样式
    defaultSymbol: undefined,
    //单值专题图字段样式
    uniqueValueInfos: [{
        //指定字段值1
        value: "字段值1",
        //匹配到该值后的样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: 'rgba(1,1,252,0)',
          // 外边线样式
          outline: new SimpleLineSymbol({
            //线颜色
            color: new Color(255, 1, 0, 1),
            //线宽
            width: 1
          })
        })
    },{
        //指定字段值2
        value: "字段值2",
        //匹配到该值后的样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: 'rgba(1,1,252,0)',
          // 外边线样式
          outline: new SimpleLineSymbol({
            //线颜色
            color: new Color(255, 1, 0, 1),
            //线宽
            width: 1
          })
        })
    }]
});

字段表达式

// 设置字段表达式，表达式更方便用户自定义可视化效果
// 目前能支持简单运算（加、减、乘、除等），支持要素链接符$feature
 const renderer = new UniqueValueRenderer({
          valueExpression:"$feature.FID>10?'样式1':'样式2'",
          //单值专题图字段样式
          uniqueValueInfos: [
            {
              //指定字段值1
              value:'样式1',
              //匹配到该值后的样式
              symbol: new SimpleMarkerSymbol({
                // 填充颜色
                color: "rgba(255,0,255,1)",
                // 点半径
                size: 40,
                // 外边线样式
                outline: new SimpleLineSymbol({
                  //线颜色
                  color: new Color(255, 1, 0, 1),
                  //线宽
                  width: 1,
                }),
                style:'arrow'
              }),
            },
            {
              //指定字段值2
              value: "样式2",
              //匹配到该值后的样式
              symbol: new SimpleFillSymbol({
                // 填充颜色
                color: "rgba(0,0,255,0.2)",
                // 外边线样式
                outline: new SimpleLineSymbol({
                  //线颜色
                  color: new Color(255, 1, 0, 1),
                  //线宽
                  width: 1,
                  style:'dot'
                }),
                style:'cross'
              }),
            },
          ],
          // 默认样式
          defaultSymbol: defaultSymbol,
        });

Extends

Members

defaultDescriptionString

默认的渲染器的描述信息

defaultLabelString

默认的渲染器标签

defaultSymbolSymbol

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

defaultVisibleBoolean

是否可视化默认符号

fieldString

field 'unique-value'，字段名

idString

渲染器id

typeString

type 'unique-value'，单值专题图

uniqueValueInfosArray.<UniqueValueInfo>

uniqueValueInfos 单值专题图字段样式

valueExpressionString

字段表达式

valueExpressionTitleString

字段表达式描述

visualVariablesArray.<VisualVariable>

视觉变量

Methods

UniqueValueRenderer.fromJSON(json){UniqueValueRenderer}

document/renderer/UniqueValueRenderer.js, line 421

通过json创造UniqueValueRenderer对象

Name Type Description
json Object
Returns:
Type Description
UniqueValueRenderer 新创建的UniqueValueRenderer对象
Example

通过json创造UniqueValueRenderer对象

let uniqueValueRenderer = UniqueValueRenderer.fromJSON({
   // 初始化参数
})

clone(){UniqueValueRenderer}

document/renderer/UniqueValueRenderer.js, line 407

克隆renderer对象

Returns:
Type Description
UniqueValueRenderer 克隆后的renderer对象

inherited fromJSON(json)

document/renderer/BaseRenderer.js, line 50

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

Name Type Description
json Object

渲染规则的实例化JSON

toJSON(){Object}

document/renderer/UniqueValueRenderer.js, line 385

导出为json对象

Returns:
Type Description
Object json对象