# new ClusterRenderer(options)
聚类渲染器，多个点聚集在一起，会形成一个点符号 使用须知： 1、推荐使用点要素图层作为聚类的数据，区和线会额外增加计算聚类点的工作量，影响加载的性能。 2、推荐使用空间参考系为地理系的数据，其他投影系会在前端内部处理反投逻辑，影响加载的性能。
参数:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
options |
Object | 构造参数 |
|
radius |
Number | 80 | 聚合半径，单位像素 |
clusterBoundSymbol |
SimpleFillSymbol | 聚合边界，显示聚合区域的范围，仅支持部分样式 |
|
clusterInfos |
Array.<(UniqueValueClusterlnfo|ClassBreakClusterlnfo)> | 聚合信息，描述聚合点数量区间内显示的符号信息。 |
|
defaultSymbol |
Symbol | 默认的聚合点符号，目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式,不支持线图层 |
|
maxScale |
Number | 20 | 最大聚类比例尺，单位为m，超过这个比例尺范围不进行聚类 |
isExpandOnClick |
Boolean | true | 点击聚类点是否展开 |
isHoverShowBound |
Boolean | false | 鼠标悬停显示聚类边界 |
defaultLabelSymbol |
TextSymbol | 默认的文字符号 |
|
defaultLabelExpressionInfo |
Object | null | 默认的文字表达式。以$cluster_count表示聚类点数量，例如 { expression: "$cluster_count + '个'"}。 |
|
valueExpressionTitle |
String | 字段表达式描述 |
|
valueExpression |
String | '$cluster_count' | 字段表达式，默认取'$cluster_count'，表示按聚类簇上点的数量作为分段的依据 |
minHybridClusterCount |
Number | 0 | 最小混合聚合数量。大于等于此值进行混合聚类，小于此值则优先以分组类型聚类。 |
deconflictionStrategy |
String | 'none' | 聚类冲突策略，默认为'none'。'none'表示不设置冲突解决策略，'static'表示采用默认的冲突解决策略。 |
支持如下方法：
[1、通过json构造ClusterRenderer对象][2、导出json对象]
[3、克隆ClusterRenderer对象]
示例
// 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
}
})
}
]
})二维Leaflet上聚类的实现依赖于Leaflet.markercluster插件
链接地址:https://github.com/Leaflet/Leaflet.markercluster
const layer = new IGSFeatureLayer({
url: "http://192.168.82.89:8089/igs/rest/services/Map/%E6%B9%96%E5%8C%97%E7%9C%814326/FeatureServer/1-0",
renderer: new ClusterRenderer({
// 聚类参数
clusterInfos: [
// 聚类分段2
{
// 最小聚类数量
minValue: 1,
// 最大聚类数量
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: 300,
// 聚类文字样式
labelExpressionInfo: {
expression: "$cluster_count + '个'",
},
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,
},
}),
},
],
isExpandOnClick: true,
isHoverShowBound: true,
defaultLabelSymbol: new TextSymbol({
// 文字颜色
color: "#ff0000",
// 文字大小
font: {
size: 20,
family: "SimHei",
},
haloColor: "#ffffff",
haloSize: 3,
}),
defaultLabelExpressionInfo: { expression: "$cluster_count + '个'"},
})
})
map.add(layer)
layer.on("layerview-created", (result) => {
console.log("加载完毕:", result.layer);
//视点跳转
view.flyTo({
extent: result.layer.extent,
});
const layer = result.layer;
const layerView = result.layerView;
// 获取innerLayer，这个innerLayer就是Leaflet.markercluster插件中的L.markerClusterGroup图层，相关api可以参考上述链接
const innerLayer = layerView.innerLayer;
});