MapGIS Client for JavaScript API

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'

/**
 * 统一专题图渲染样式，支持的图层如下：<br/>
 * [几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
 * [geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}
 * @class SimpleRenderer
 * @extends BaseRenderer
 * @moduleEX RendererModule
 * @param {Object} options 构造参数
 * @param {String} [options.label] 渲染器标签，描述渲染器含义
 * @param {String} [options.description] 渲染器的描述信息
 * @param {Object} [options.symbol] 统一专题图样式，支持的样式如下：<br/>
 * [1、点样式]{@link SimpleMarkerSymbol}<br/>
 * [2、线样式]{@link SimpleLineSymbol}<br/>
 * [3、区样式]{@link SimpleFillSymbol}<br/>
 * 示例如下：<br>
 * <a href='#Simple-point'>[1、单值专题图-点]</a><br/>
 * <a href='#Simple-line'>[2、单值专题图-线]</a><br/>
 * <a href='#Simple-fill'>[3、单值专题图-区]</a>
 * @example <caption><h7 id='Simple-point'>统一专题图-点</h7></caption>
 * // ES5引入方式
 * const { SimpleRenderer } = Zondy.Renderer
 * const { SimpleMarkerSymbol, SimpleLineSymbol } = Zondy.Symbol
 * const { Color } = Zondy
 * // ES6引入方式
 * import { SimpleRenderer, SimpleMarkerSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
 * // 初始化统一专题图样式对象
 * const simpleRenderer = new SimpleRenderer({
 *   // 样式对象，更多样式详见：[《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='Simple-line'>统一专题图-线</h7></caption>
 * // ES5引入方式
 * const { SimpleRenderer } = Zondy.Renderer
 * const { SimpleLineSymbol } = Zondy.Symbol
 * const { Color } = Zondy
 * // ES6引入方式
 * import { SimpleRenderer, SimpleLineSymbol， Color } from "@mapgis/webclient-common"
 * // 初始化统一专题图样式对象
 * const simpleRenderer = new SimpleRenderer({
 *   // 样式对象，更多样式详见：[《SimpleLineSymbol》]{@link SimpleLineSymbol}
 *   symbol: new SimpleLineSymbol({
 *     //线符号颜色
 *     color: new Color(255, 1, 0, 11),
 *     //线宽
 *     width: 1
 *   })
 * });
 *
 * @example <caption><h7 id='Simple-fill'>统一专题图-区</h7></caption>
 * // ES5引入方式
 * const { SimpleRenderer } = Zondy.Renderer
 * const { SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
 * const { Color } = Zondy
 * // ES6引入方式
 * import { SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
 * // 初始化统一专题图样式对象，更多样式详见：[《SimpleFillSymbol》]{@link SimpleFillSymbol}
 * const simpleRenderer = new SimpleRenderer({
 *   // 样式对象，更多样式详见：[《SimpleLineSymbol》]{@link SimpleLineSymbol}
 *   symbol: new SimpleFillSymbol({
 *     // 填充颜色
 *     color: 'rgba(1,1,252,0)',
 *     // 外边线样式
 *     outline: new SimpleLineSymbol({
 *       //线颜色
 *       color: new Color(255, 1, 0, 1),
 *       //线宽
 *       width: 1
 *     })
 *   })
 * });
 */
class SimpleRenderer extends BaseRenderer {
  constructor(options) {
    super(options)
    options = defaultValue(options, {})
    /**
     * type 'simple'，统一专题图
     * @member {String} SimpleRenderer.prototype.type
     */
    this.type = RendererType.simple
    /**
     * defaultSymbol 统一专题图样式
     * @member {Symbol} SimpleRenderer.prototype.symbol
     */
    this.symbol = this._decorate(
      'symbol',
      options.symbol,
      Symbol,
      Symbol.fromJSON
    )
    /**
     *  渲染器标签，描述渲染器含义
     * @member {String} SimpleRenderer.prototype.label
     */
    this.label = defaultValue(options.label, null)
    /**
     *  渲染器的描述信息
     * @member {String} SimpleRenderer.prototype.description
     */
    this.description = defaultValue(options.description, null)
    /**
     * 视觉变量
     * @member {Array<VisualVariable> } SimpleRenderer.prototype.visualVariables
     */
    this.visualVariables = this._decorate(
      'visualVariables',
      defaultValue(options.visualVariables, []),
      null,
      (v) => v.map((s) => VisualVariable.fromJSON(s))
    )
  }

  /**
   * 导出为json对象
   * @return {Object} json对象
   * */
  toJSON() {
    const json = super.toJSON()
    json.symbol = this.symbol.toJSON()
    json.visualVariables = this.visualVariables.map((v) => v.toJSON())
    json.label = this.label
    json.description = this.description
    return json
  }

  /**
   * 克隆renderer对象
   * @return {SimpleRenderer} 克隆后的renderer对象
   */
  clone() {
    return new SimpleRenderer(this.toJSON())
  }
}

/**
 * 通过json构造SimpleRenderer对象
 * @param {Object} json
 * @return {SimpleRenderer} 新创建的SimpleRenderer对象
 * @example <caption><h7>通过json创造SimpleRenderer对象</h7></caption>
 * let simpleRenderer = SimpleRenderer.fromJSON({
 *    // 初始化参数
 * })
 * */
SimpleRenderer.fromJSON = function (json) {
  json = defaultValue(json, {})
  return new SimpleRenderer(json)
}

Zondy.Renderer.SimpleRenderer = SimpleRenderer
export default SimpleRenderer