import { defaultValue } from '../../util'
import Zondy from '../Zondy'
import { SymbolType } from '../enum'
import SimpleLineSymbol from './SimpleLineSymbol'
import MarkerSymbol from './MarkerSymbol'
/**
* 简单Marker符号,支持点几何对象,参考示例:<a href='#new-SimpleMarkerSymbol'>[简单Marker样式]</a>
* <br><br>[ES5引入方式]:<br/>
* Zondy.Symbol.SimpleMarkerSymbol() <br/>
* [ES6引入方式]:<br/>
* import { SimpleMarkerSymbol } from "@mapgis/webclient-common" <br/>
* <br/>
* @class SimpleMarkerSymbol
* @moduleEX SymbolModule
* @extends MarkerSymbol
* @param {Object} options 构造参数
* @param {Color|String} [options.color = new Color(255, 255, 255, 1)] 填充颜色,默认为白色
* @param {SimpleLineSymbol} [options.outline = new SimpleLineSymbol()] 外边线样式
* @param {Number} [options.size = 20] 像素块大小(半径),单位像素
* @param {String} [options.style = 'circle'] marker样式,默认'circle',可选"circle"|"square"|"cross"|"x"|"diamond"|"triangle"
* @param {String} [options.path = ''] svg path属性,用于自定义符号,优先级高于style,仅支持MapView
* @param {Number} [options.xoffset = 0] marker的x轴偏移,单位像素
* @param {Number} [options.yoffset = 0] marker的y轴偏移,单位像素
* @param {Number} [options.angle = 0 ] Marker图标的旋转角度,单位度,0~360度,顺时针旋转
*
* @summary <h5>支持如下方法:</h5>
* [1、克隆并返回新的符号对象]{@link Symbol#clone} <br/>
* [2、导出一个JSON对像]{@link Symbol#toJSON} <br/>
* <a href='#fromJSON'>[3、通过json构造并返回一个新的SimpleMarkerSymbol对象]</a>
*
* @example <caption><h7 id='new-SimpleMarkerSymbol'>简单Marker样式</h7></caption>
* // ES5引入方式
* const { SimpleMarkerSymbol } = Zondy.Symbol
* const { Color } = Zondy
* // ES6引入方式
* import { SimpleMarkerSymbol, Color } from "@mapgis/webclient-common"
* const simpleMarkerSymbol = new SimpleMarkerSymbol({
* // 填充颜色
* color: new Color(252, 100, 22, 1),
* // 旋转角度,单位度,0~360度
* angle: 90,
* // marker的x轴偏移,单位像素
* xoffset: -1,
* // marker的y轴偏移,单位像素
* yoffset: 5,
* // 像素块大小(半径),单位像素
* size: 13,
* // 外边线样式
* outline: new SimpleLineSymbol({
* // 外边线颜色
* color: new Color(255, 0, 0, 1),
* // 外边线宽度
* width: 2
* }),
* });
*
* @example <caption><h7 id='new-SimpleMarkerSymbol'>符号style和自定义path路径说明</h7></caption>
* // 不论是style还是path,都是描述了图形的形状。值得注意的是,图形的填充颜色由color决定,图形的线划参数由outline属性决定。
* // 设置符号为三角形,style属性为'triangle'。
* const simpleMarkerSymbol = new SimpleMarkerSymbol({
* style: "triangle"
* });
* // 如果设置path属性,将会覆盖Style描述的符号形状,采用path属性描述的符号形状。
* const simpleMarkerSymbol = new SimpleMarkerSymbol({
* path:"M300 300 L0 300 L0 0 L300 300"
* });
*/
class SimpleMarkerSymbol extends MarkerSymbol {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* 符号类型
* @member {String} SimpleMarkerSymbol.prototype.type
*/
this.type = SymbolType.simpleMarker
/**
* marker大小
* @member {Number} SimpleMarkerSymbol.prototype.size
*/
this.size = defaultValue(options.size, 20)
/**
* 外边线样式类型
* @member {SimpleLineSymbol} SimpleMarkerSymbol.prototype.outline
*/
this.outline = this._decorate(
'outline',
options.outline,
SimpleLineSymbol,
SimpleLineSymbol.fromJSON
)
/**
* marker样式
* @member {String} SimpleMarkerSymbol.prototype.style
*/
this.style = defaultValue(options.style, 'circle')
/**
* svg path属性,用于自定义,优先级高于style
* @member {String} SimpleMarkerSymbol.prototype.path
*/
this.path = defaultValue(options.path, '')
}
/**
* 通过json构造并返回一个新的SimpleMarkerSymbol对象<a id='fromJSON'></a>
* @param {Object} json 符号的实例化JSON
* @return {SimpleMarkerSymbol} 新的SimpleMarkerSymbol对象
* @example <caption><h7>通过json构造并返回一个新的SimpleMarkerSymbol对象</h7></caption>
*/
static fromJSON(json) {
json = defaultValue(json, {})
return new SimpleMarkerSymbol(json)
}
/**
* 克隆并返回新的符号对象
* @return {SimpleMarkerSymbol} 克隆后的新符号对象
*/
clone() {
return new SimpleMarkerSymbol(this.toJSON())
}
/**
* 导出为JSON对象
* @return {Object} JSON对像
*/
toJSON() {
const json = super.toJSON()
json.size = this.size
json.outline = this.outline.toJSON()
json.style = this.style
json.path = this.path
return json
}
}
Zondy.Symbol.SimpleMarkerSymbol = SimpleMarkerSymbol
export default SimpleMarkerSymbol