import BaseRenderer from './BaseRenderer'
import { Zondy } from '../../base'
import { defaultValue } from '../../util'
import { RendererType } from '../../base/enum'
import { Symbol } from '../../base/symbol'
import { VisualVariable } from './visualVariable'
import ClassBreakInfo from './support/ClassBreakInfo'
/**
* 分段专题图渲染样式，支持的图层如下：<br/>
* [IGS地图图片图层]{@link IGSMapImageLayer}、[几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
* [geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}
* @class ClassBreakRenderer
* @extends BaseRenderer
* @moduleEX RendererModule
* @param {Object} options 构造参数
* @param {String} [options.field = ''] 过滤字段名
* @param {String} [options.valueExpressionTitle] 字段表达式描述
* @param {String} [options.valueExpression] 字段表达式
* @param {Boolean} [options.defaultVisible = true] 默认符号是否显示
* @param {Array<ClassBreakInfo>} [options.classBreakInfos = []] 分段专题图字段样式，支持的样式如下：<br/>
* [1、点样式]{@link SimpleMarkerSymbol}<br/>
* [2、线样式]{@link SimpleLineSymbol}<br/>
* [3、区样式]{@link SimpleFillSymbol}<br/>
* 示例如下：<br>
* <a href='#ClassBreak-point'>[1、分段专题图-点]</a><br/>
* <a href='#ClassBreak-line'>[2、分段专题图-线]</a><br/>
* <a href='#ClassBreak-fill'>[3、分段专题图-区]</a>
* @param {Object} [options.defaultSymbol] 默认样式，当分段值未覆盖时，使用默认样式，支持的样式如下：<br/>
* [1、点样式]{@link SimpleMarkerSymbol}<br/>
* [2、线样式]{@link SimpleLineSymbol}<br/>
* [3、区样式]{@link SimpleFillSymbol}<br/>
* 示例如下：<br>
* <a href='#defaultSymbol-point'>[1、默认样式-点]</a><br/>
* <a href='#defaultSymbol-line'>[2、默认样式-线]</a><br/>
* <a href='#defaultSymbol-fill'>[3、默认样式-区]</a>
*
* @example <caption><h7 id='ClassBreak-point'>分段专题图-点</h7></caption>
* // 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》]{@link 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》]{@link SimpleMarkerSymbol}
* symbol: new SimpleMarkerSymbol({
* // 填充颜色
* color: 'rgba(1,1,252,0)',
* // 点半径
* size: 13,
* // 外边线样式
* outline: new SimpleLineSymbol({
* //线颜色
* color: new Color(255, 1, 0, 1),
* //线宽
* width: 1
* })
* })
* }]
* });
*
* @example <caption><h7 id='ClassBreak-line'>分段专题图-线</h7></caption>
* // 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》]{@link SimpleLineSymbol}
* symbol: new SimpleLineSymbol({
* //线符号颜色
* color: new Color(1, 255, 0, 1),
* //线宽
* width: 2
* })
* },{
* // 分段最大值
* maxValue: 40,
* // 分段最大值
* minValue: 20,
* //匹配到该值后的样式，更多样式详见：[《SimpleLineSymbol》]{@link SimpleLineSymbol}
* symbol: new SimpleLineSymbol({
* //线符号颜色
* color: new Color(1, 255, 0, 1),
* //线宽
* width: 2
* })
* }]
* });
*
* @example <caption><h7 id='ClassBreak-fill'>分段专题图-区</h7></caption>
* // 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》]{@link 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》]{@link SimpleFillSymbol}
* symbol: new SimpleFillSymbol({
* // 填充符号颜色
* color: new Color(21, 110, 22, 0.3),
* // 外边线样式
* outline: new SimpleLineSymbol({
* //线符号颜色
* color: new Color(255, 255, 0, 1),
* //线宽
* width: 1
* })
* })
* }]
* });
*
* @example <caption><h7 id='defaultSymbol-point'>默认样式-点</h7></caption>
* // ES5引入方式
* const { SimpleMarkerSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { ClassBreakRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleMarkerSymbol, SimpleLineSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
* // 初始化默认样式，更多样式详见：[《SimpleMarkerSymbol》]{@link 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
* })
*
* @example <caption><h7 id='defaultSymbol-line'>默认样式-线</h7></caption>
* // ES5引入方式
* const { SimpleLineSymbol, SimpleMarkerSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { ClassBreakRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleLineSymbol, SimpleMarkerSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
* // 初始化默认样式，更多样式详见：[《SimpleLineSymbol》]{@link SimpleLineSymbol}
* const defaultSymbol = new SimpleLineSymbol({
* // 填充颜色
* color: new Color(255, 0, 0, 1),
* // 线宽
* width: 2
* })
* // 初始化渲染对象
* const renderer = new ClassBreakRenderer({
* //字段名
* field: '你的字段名',
* //分段专题图字段样式
* classBreakInfos: [],
* // 默认样式
* defaultSymbol: defaultSymbol
* })
*
* @example <caption><h7 id='defaultSymbol-fill'>默认样式-区</h7></caption>
* // ES5引入方式
* const { SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { ClassBreakRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleFillSymbol, SimpleLineSymbol, Color, ClassBreakRenderer } from "@mapgis/webclient-common"
* // 初始化默认样式，更多样式详见：[《SimpleFillSymbol》]{@link 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
* })
* @see [<h7>字段表达式说明</h7>]{@tutorial 表达式}
* @example <caption><h7 id='valueExpression'>字段表达式</h7></caption>
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,
}),
}),
},
],
});
*/
class ClassBreakRenderer extends BaseRenderer {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* type 'class-breaks'，分段专题图
* @member {String} ClassBreakRenderer.prototype.type
*/
this.type = RendererType.classBreak
/**
* field 过滤字段名
* @member {String} ClassBreakRenderer.prototype.field
*/
this.field = defaultValue(options.field, '')
/**
* classBreakInfos 分段参数
* @member {Array<ClassBreakInfo>} ClassBreakRenderer.prototype.classBreakInfos
*/
this.classBreakInfos = this._decorate(
'classBreakInfos',
defaultValue(options.classBreakInfos, []),
null,
(value) => {
return value.map((val) => {
return ClassBreakInfo.fromJSON(val)
})
}
)
/**
* defaultSymbol 默认样式，当分段值未覆盖时，使用默认样式
* @member {Symbol} ClassBreakRenderer.prototype.defaultSymbol
*/
this.defaultSymbol = this._decorate(
'symbol',
options.defaultSymbol,
Symbol,
Symbol.fromJSON
)
/**
* 是否可视化默认符号
* @member {Boolean} ClassBreakRenderer.prototype.defaultVisible
*/
this.defaultVisible = defaultValue(options.defaultVisible, true)
/**
* 视觉变量
* @member {Array<VisualVariable> } ClassBreakRenderer.prototype.visualVariables
*/
this.visualVariables = this._decorate(
'visualVariables',
defaultValue(options.visualVariables, []),
null,
(v) => v.map((s) => VisualVariable.fromJSON(s))
)
/**
* 字段表达式描述
* @member {String} ClassBreakRenderer.prototype.valueExpressionTitle
*/
this.valueExpressionTitle = defaultValue(options.valueExpressionTitle, '')
/**
* 字段表达式
* @member {String} ClassBreakRenderer.prototype.valueExpression
*/
this.valueExpression = defaultValue(options.valueExpression, '')
/**
* 默认的标签
* @member {String} ClassBreakRenderer.prototype.defaultLabel
*/
this.defaultLabel = defaultValue(options.defaultLabel, null)
/**
* 默认的描述
* @member {String} ClassBreakRenderer.prototype.defaultDescription
*/
this.defaultDescription = defaultValue(options.defaultDescription, null)
}
/**
* 导出为json对象
* @return {Object} json对象
* */
toJSON() {
const json = super.toJSON()
json.field = this.field
json.classBreakInfos = this.classBreakInfos
json.defaultSymbol = this.defaultSymbol.toJSON()
json.classBreakInfos = this.classBreakInfos.map((v) => v.toJSON())
json.visualVariables = this.visualVariables.map((v) => v.toJSON())
json.valueExpression = this.valueExpression
json.valueExpressionTitle = this.valueExpressionTitle
json.defaultLabel = this.defaultLabel
json.defaultDescription = this.defaultDescription
json.defaultVisible = this.defaultVisible
return json
}
/**
* 克隆renderer对象
* @return {ClassBreakRenderer} 克隆后的renderer对象
*/
clone() {
return new ClassBreakRenderer(this.toJSON())
}
}
/**
* 通过json创造ClassBreakRenderer对象
* @param {Object} json
* @return {ClassBreakRenderer} 新创建的ClassBreakRenderer对象
* @example <caption><h7>通过json创造ClassBreakRenderer对象</h7></caption>
* let classBreakRenderer = ClassBreakRenderer.fromJSON({
* // 初始化参数
* })
* */
ClassBreakRenderer.fromJSON = function (json) {
json = defaultValue(json, {})
return new ClassBreakRenderer(json)
}
Zondy.Renderer.ClassBreakRenderer = ClassBreakRenderer
export default ClassBreakRenderer
