import BaseRenderer from './BaseRenderer'
import { defaultValue } from '../../util'
import { Zondy } from '../../base'
import { RendererType } from '../../base/enum'
import { SimpleMarkerSymbol, SimpleFillSymbol, Symbol } from '../../base/symbol'
import ClusterInfo from './support/ClusterInfo'
/**
* 聚类渲染器，多个点聚集在一起，会形成一个点符号
* @class ClusterRenderer
* @extends BaseRenderer
* @moduleEX RendererModule
* @param {Object} options 构造参数
* @param {Number} [options.radius = 80] 聚合半径，单位像素
* @param {SimpleFillSymbol} [options.clusterBoundSymbol] 聚合边界，显示聚合区域的范围，仅支持部分样式
* @param {Array<ClusterInfo>} [options.clusterInfos] 聚合信息，描述聚合点数量区间内显示的符号信息。
* @param {Symbol} [options.defaultSymbol] 默认的聚合点符号，目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式,不支持线图层
* @param {Number} [options.maxScale = 20] 最大聚类比例尺，单位为m，超过这个比例尺范围不进行聚类
* @param {Boolean} [options.isExpandOnClick = true] 点击聚类点是否展开
* @param {Boolean} [options.isHoverShowBound = false] 鼠标悬停显示聚类边界
*
* @summary <h5>支持如下方法：</h5>
* <a href='#fromJSON'>[1、通过json构造ClusterRenderer对象]</a><br/>
* <a href='#toJSON'>[2、导出json对象]</a><br/>
* <a href='#clone'>[3、克隆ClusterRenderer对象]</a>
*
* @example <caption><h7 id='new-PictureMarkerSymbol'>创建随机渲染器对象</h7></caption>
* // ES5引入方式
* const { ClusterRenderer } = Zondy.Renderer
* const { TextSymbol, SimpleMarkerSymbol } = Zondy.Symbol
* // ES6引入方式
* import { ClusterRenderer, TextSymbol, SimpleMarkerSymbol } from "@mapgis/webclient-common"
* // 初始化聚类渲染器对象
* const clusterRenderer = new ClusterRenderer({
* // 聚类参数
* clusterInfos:[
* // 聚类分段1
* {
* // 最小聚类数量
* minValue: 0,
* // 最大聚类数量
* maxValue: 2,
* // 聚类文字样式
* labelSymbol: new TextSymbol({
* // 文字颜色
* color:'#ffffff',
* // 文字大小
* font:{
* size:20
* },
* }),
* // 聚类符号样式
* symbol: new SimpleMarkerSymbol({
* // 符号颜色
* color: 'rgba(112, 0, 255, 0.6)',
* // 符号大小
* size: 20,
* // 符号外边线样式
* outline: {
* // 外边线颜色
* color: 'rgba(122, 211, 22, 0.6)',
* // 外边线宽度
* width: 4
* }
* })
* },
* // 聚类分段2
* {
* // 最小聚类数量
* minValue: 2,
* // 最大聚类数量
* maxValue: 6,
* // 聚类文字样式
* labelSymbol:new TextSymbol({
* // 文字颜色
* color: '#000000',
* // 文字大小
* font: {
* size: 12
* },
* }),
* // 聚类符号样式
* symbol: new SimpleMarkerSymbol({
* // 符号颜色
* color: 'rgba(240, 194, 12, 0.6)',
* // 符号大小
* size: 30,
* // 符号外边线样式
* outline: {
* // 外边线颜色
* color: 'rgba(241, 211, 87, 0.6)',
* // 外边线宽度
* width: 5
* }
* })
* },
* // 聚类分段3
* {
* // 最小聚类数量
* minValue: 6,
* // 最大聚类数量
* maxValue: 10,
* // 聚类文字样式
* labelSymbol: new TextSymbol({
* // 文字颜色
* color: '#000000',
* // 文字大小
* font: {
* size: 12
* },
* }),
* // 聚类符号样式
* symbol: new SimpleMarkerSymbol({
* // 符号颜色
* color: 'rgba(255, 0, 0, 0.6)',
* // 符号大小
* size: 30,
* // 符号外边线样式
* outline: {
* // 外边线颜色
* color: 'rgba(111, 111, 111, 0.6)',
* // 外边线宽度
* width: 5
* }
* })
* }
* ]
* })
*/
class ClusterRenderer extends BaseRenderer {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* 类型，默认为'cluster'
* @readonly
* @member {String} ClusterRenderer.prototype.type
*/
this.type = RendererType.cluster
/**
* 聚合半径，目前仅支持像素。
* @member {Number} ClusterRenderer.prototype.radius
*/
this.radius = defaultValue(options.radius, 80)
/**
* 聚合边界，显示聚合区域的范围
* @member {SimpleFillSymbol} ClusterRenderer.prototype.clusterBoundSymbol
*/
this.clusterBoundSymbol = this._decorate(
'clusterBoundSymbol',
options.clusterBoundSymbol,
SimpleFillSymbol,
SimpleFillSymbol.fromJSON
)
/**
* 聚合信息，描述聚合点数量区间内显示的符号信息。
* @member {Array<ClusterInfo>} ClusterRenderer.prototype.clusterInfos
*/
this.clusterInfos = this._decorate(
'clusterInfos',
defaultValue(options.clusterInfos, []),
null,
(value) => {
return value.map((val) => {
return ClusterInfo.fromJSON(val)
})
}
)
/**
* 默认的聚合点符号，目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式
* @member {Symbol} ClusterRenderer.prototype.defaultSymbol
*/
this.defaultSymbol = this._decorate(
'defaultSymbol',
defaultValue(
options.defaultSymbol,
new SimpleMarkerSymbol({
color: 'rgba(240, 194, 12, 0.6)',
size: 30,
outline: {
color: 'rgba(241, 211, 87, 0.6)',
width: 5
}
})
),
Symbol,
Symbol.fromJSON
)
/**
* 最大聚类比例尺，单位为m，超过这个比例尺范围不进行聚类
* @member {Number} ClusterRenderer.prototype.maxScale
*/
this.maxScale = defaultValue(options.maxScale, 20)
/**
* 点击聚类点是否展开
* @member {Boolean} ClusterRenderer.prototype.isExpandOnClick
*/
this.isExpandOnClick = defaultValue(options.isExpandOnClick, true)
/**
* 鼠标悬停显示聚类边界
* @member {Boolean} ClusterRenderer.prototype.isHoverShowBound
*/
this.isHoverShowBound = defaultValue(options.isHoverShowBound, false)
}
/**
* <a id='fromJSON'/>
* 通过json构造ClusterRenderer对象
* @param {Object} json json对象
* @return {ClusterRenderer} ClusterRenderer实例
*/
static fromJSON(json) {
json = defaultValue(json, {})
return new ClusterRenderer(json)
}
/**
* <a id='toJSON'/>
* 导出json对象
* @return {Object} json对象
*/
toJSON() {
const json = super.toJSON()
json.type = this.type
json.radius = this.radius
json.clusterBoundSymbol = this.clusterBoundSymbol.toJSON()
json.clusterInfos = this.clusterInfos.map((v) => v.toJSON())
json.defaultSymbol = this.defaultSymbol.toJSON()
json.maxScale = this.maxScale
json.isExpandOnClick = this.isExpandOnClick
json.isHoverShowBound = this.isHoverShowBound
return json
}
/**
* <a id='clone'/>
* 克隆ClusterRenderer对象
* @return {ClusterRenderer} 克隆后的ClusterRenderer实例
*/
clone() {
return new ClusterRenderer(this.toJSON())
}
}
Zondy.Renderer.ClusterRenderer = ClusterRenderer
export default ClusterRenderer
