Class: ColorVariable

ColorVariable

new ColorVariable(options)

document/renderer/visualVariable/ColorVariable.js, line 6

color视觉变量 当用于设置栅格元图层的样式时，支持使用valueExpression来配置当前stops中的value时绝对值类型还是相对值类型，只支持设置$voxel_absolute_value.xxx和$voxel_relative_value.xxx两个，xxx为具体属性名称，此时不支持其他运算符

Name Type Default Description
options Object {} 可选

初始化参数

Name Type Description
stops Array.<ColorStop> 可选

颜色分段数组
Examples

创建颜色视觉变量

// ES5引入方式
const { ColorVariable } = zondy.renderer

// ES6引入方式
import { ColorVariable } from '@mapgis/webclient-common'
const colorVariable = new ColorVariable({
  field: 'FID',
  stops: []
})
color视觉变量使用方式
// 获取layer上renderer对象
 const renderer = layer.renderer
// 根据FID取值设置#FFFCD4到#350242的过渡颜色值
// FID取值小于0时，显示颜色#FFFCD4
// FID取值大于200时，显示颜色#350242
// FID取值在0-200之间时，显示颜色过渡值
 renderer.visualVariables = [{
            type: "color",
            valueExpression: "$feature.FID",
            stops: [
              {
                color: "#FFFCD4",
                value: 0,
              },
              {
                color: "#350242",
                value: 200,
              },
            ],
          }]
栅格体元中color视觉变量使用方式-valueExpression绝对值类型
// 获取layer上renderer对象
 const renderer = layer.renderer
// 根据属性rhum取值设置#FFFCD4到#350242的过渡颜色值
// rhum取值小于10时，显示颜色#FFFCD4
// rhum取值大于50时，显示颜色#350242
// rhum取值在10-50之间时，显示颜色#FFFCD4到颜色#350242的渐变结果
 renderer.visualVariables = [{
            type: "color",
            valueExpression: "$voxel_absolute_value.rhum",
            stops: [
              {
                color: "#FFFCD4",
                value: 10,
              },
              {
                color: "#350242",
                value: 50,
              },
            ],
          }]
栅格体元中color视觉变量使用方式-valueExpression相对值类型
// 获取layer上renderer对象
 const renderer = layer.renderer
// 根据属性rhum所处最大最小范围内的比例值，设置#FFFCD4到#350242的过渡颜色值
// 比例值计算规则relative = (rhum - min)/(max-min)
// relative取值小于0.1时，显示颜色#FFFCD4
// relative取值大于0.5时，显示颜色#350242
// relative取值在[0.1, 0.5]之间时，显示颜色#FFFCD4到颜色#350242的渐变结果
 renderer.visualVariables = [{
            type: "color",
            valueExpression: "$voxel_relative_value.rhum",
            stops: [
              {
                color: "#FFFCD4",
                value: 0.1,
              },
              {
                color: "#350242",
                value: 0.5,
              },
            ],
          }]
栅格体元中color视觉变量使用方式-field
// 获取layer上renderer对象
 const renderer = layer.renderer
// 根据属性rhum取值设置#FFFCD4到#350242的过渡颜色值
// rhum取值小于10时，显示颜色#FFFCD4
// rhum取值大于50时，显示颜色#350242
// rhum取值在10-50之间时，显示颜色#FFFCD4到颜色#350242的渐变结果
 renderer.visualVariables = [{
            type: "color",
            field: "rhum",
            stops: [
              {
                color: "#FFFCD4",
                value: 10,
              },
              {
                color: "#350242",
                value: 50,
              },
            ],
          }]

Members

stopsArray.<ColorStop>

归一化字段

Methods

clone(){ColorVariable}

document/renderer/visualVariable/ColorVariable.js, line 150

克隆对象

Returns:
Type Description
ColorVariable 克隆后的ColorVariable对象

toJSON(){Object}

document/renderer/visualVariable/ColorVariable.js, line 138

导出为 JSON 对象

Returns:
Type Description
Object JSON 对象

ColorVariable.fromJSON(json){ColorVariable}

document/renderer/visualVariable/ColorVariable.js, line 130

通过 JSON 对象构造 ColorVariable 对象

Name Type Description
json Object

JSON 对象
Returns:
Type Description
ColorVariable ColorVariable 对象