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 UniqueValueInfo from './support/UniqueValueInfo'
/**
* 单值专题图渲染样式，支持的图层如下：<br/>
* [IGS地图图片图层]{@link IGSMapImageLayer}、[几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
* [geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}
* @class UniqueValueRenderer
* @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<UniqueValueInfo>} [options.uniqueValueInfos = []] 单值专题图字段样式，支持的样式如下：<br/>
* [1、点样式]{@link SimpleMarkerSymbol}<br/>
* [2、线样式]{@link SimpleLineSymbol}<br/>
* [3、区样式]{@link SimpleFillSymbol}<br/>
* 示例如下：<br>
* <a href='#UniqueValue-point'>[1、单值专题图-点]</a><br/>
* <a href='#UniqueValue-line'>[2、单值专题图-线]</a><br/>
* <a href='#UniqueValue-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='defaultSymbol-point'>默认样式-点</h7></caption>
* // ES5引入方式
* const { SimpleMarkerSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { UniqueValueRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleMarkerSymbol, SimpleLineSymbol, Color, UniqueValueRenderer } 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 UniqueValueRenderer({
* //字段名
* field: '你的字段名',
* //单值专题图字段样式
* uniqueValueInfos: [],
* // 默认样式
* defaultSymbol: defaultSymbol
* })
*
* @example <caption><h7 id='defaultSymbol-line'>默认样式-线</h7></caption>
* // ES5引入方式
* const { SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { UniqueValueRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleLineSymbol, Color, UniqueValueRenderer } from "@mapgis/webclient-common"
* // 初始化默认样式，更多样式详见：[《SimpleLineSymbol》]{@link SimpleLineSymbol}
* const defaultSymbol = new SimpleLineSymbol({
* // 填充颜色
* color: new Color(255, 0, 0, 1),
* // 线宽
* width: 2
* })
* // 初始化渲染对象
* const renderer = new UniqueValueRenderer({
* //字段名
* field: '你的字段名',
* //单值专题图字段样式
* uniqueValueInfos: [],
* // 默认样式
* defaultSymbol: defaultSymbol
* })
*
* @example <caption><h7 id='defaultSymbol-fill'>默认样式-区</h7></caption>
* // ES5引入方式
* const { SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* const { UniqueValueRenderer } = Zondy.Renderer
* // ES6引入方式
* import { SimpleFillSymbol, SimpleLineSymbol, Color, UniqueValueRenderer } from "@mapgis/webclient-common"
* // 初始化默认样式，更多样式详见：[《SimpleFillSymbol》]{@link 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
* })
*
* @example <caption><h7 id='UniqueValue-point'>单值专题图-点</h7></caption>
* // ES5引入方式
* const { UniqueValueRenderer } = Zondy.Renderer
* const { SimpleMarkerSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* // ES6引入方式
* import { UniqueValueRenderer, SimpleMarkerSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
* //创建单值专题图渲染样式对象，更多样式详见：[《SimpleMarkerSymbol》]{@link 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
* })
* })
* }]
* });
*
* @example <caption><h7 id='UniqueValue-line'>单值专题图-线</h7></caption>
* // ES5引入方式
* const { UniqueValueRenderer } = Zondy.Renderer
* const { SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* // ES6引入方式
* import { UniqueValueRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
* //创建单值专题图渲染样式对象，更多样式详见：[《SimpleLineSymbol》]{@link 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
* })
* }]
* });
*
* @example <caption><h7 id='UniqueValue-fill'>单值专题图-区</h7></caption>
* // ES5引入方式
* const { UniqueValueRenderer } = Zondy.Renderer
* const { SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
* const { Color } = Zondy
* // ES6引入方式
* import { UniqueValueRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
* //创建单值专题图渲染样式对象，更多样式详见：[《SimpleFillSymbol》]{@link 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
* })
* })
* }]
* });
* @see [<h7>字段表达式说明</h7>]{@tutorial 表达式}
* @example <caption><h7 id='valueExpression'>字段表达式</h7></caption>
* // 设置字段表达式，表达式更方便用户自定义可视化效果
* // 目前能支持简单运算（加、减、乘、除等），支持要素链接符$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,
});
*/
class UniqueValueRenderer extends BaseRenderer {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* type 'unique-value'，单值专题图
* @member {String} UniqueValueRenderer.prototype.type
*/
this.type = RendererType.uniqueValue
/**
* field 'unique-value'，字段名
* @member {String} UniqueValueRenderer.prototype.field
*/
this.field = defaultValue(options.field, '')
/**
* uniqueValueInfos 单值专题图字段样式
* @member {Array<UniqueValueInfo>} UniqueValueRenderer.prototype.uniqueValueInfos
*/
this.uniqueValueInfos = this._decorate(
'uniqueValueInfos',
defaultValue(options.uniqueValueInfos, []),
null,
(value) => {
return value.map((val) => {
return UniqueValueInfo.fromJSON(val)
})
}
)
/**
* defaultSymbol 默认样式，当分段值未覆盖时，使用默认样式
* @member {Symbol} UniqueValueRenderer.prototype.defaultSymbol
*/
this.defaultSymbol = this._decorate(
'symbol',
options.defaultSymbol,
Symbol,
Symbol.fromJSON
)
/**
* 是否可视化默认符号
* @member {Boolean} UniqueValueRenderer.prototype.defaultVisible
*/
this.defaultVisible = defaultValue(options.defaultVisible, true)
/**
* 视觉变量
* @member {Array<VisualVariable>} UniqueValueRenderer.prototype.visualVariables
*/
this.visualVariables = this._decorate(
'visualVariables',
defaultValue(options.visualVariables, []),
null,
(v) => v.map((s) => VisualVariable.fromJSON(s))
)
/**
* 字段表达式描述
* @member {String} UniqueValueRenderer.prototype.valueExpressionTitle
*/
this.valueExpressionTitle = defaultValue(options.valueExpressionTitle, '')
/**
* 字段表达式
* @member {String} UniqueValueRenderer.prototype.valueExpression
*/
this.valueExpression = defaultValue(options.valueExpression, '')
/**
* 默认的渲染器标签
* @member {String} UniqueValueRenderer.prototype.defaultLabel
*/
this.defaultLabel = defaultValue(options.defaultLabel, null)
/**
* 默认的渲染器的描述信息
* @member {String} UniqueValueRenderer.prototype.defaultDescription
*/
this.defaultDescription = defaultValue(options.defaultDescription, null)
}
/**
* 导出为json对象
* @return {Object} json对象
* */
toJSON() {
const json = super.toJSON()
json.field = this.field
json.defaultSymbol = this.defaultSymbol.toJSON()
json.uniqueValueInfos = this.uniqueValueInfos.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 {UniqueValueRenderer} 克隆后的renderer对象
*/
clone() {
return new UniqueValueRenderer(this.toJSON())
}
}
/**
* 通过json创造UniqueValueRenderer对象
* @param {Object} json
* @return {UniqueValueRenderer} 新创建的UniqueValueRenderer对象
* @example <caption><h7>通过json创造UniqueValueRenderer对象</h7></caption>
* let uniqueValueRenderer = UniqueValueRenderer.fromJSON({
* // 初始化参数
* })
* */
UniqueValueRenderer.fromJSON = function (json) {
json = defaultValue(json, {})
return new UniqueValueRenderer(json)
}
Zondy.Renderer.UniqueValueRenderer = UniqueValueRenderer
export default UniqueValueRenderer
