Class: ClusterRenderer

ClusterRenderer

new ClusterRenderer(options)

document/renderer/ClusterRenderer.js, line 12

支持如下方法：
[1、通过json构造ClusterRenderer对象]
[2、导出json对象]
[3、克隆ClusterRenderer对象]

聚类渲染器，多个点聚集在一起，会形成一个点符号 使用须知： 1、推荐使用点要素图层作为聚类的数据，区和线会额外增加计算聚类点的工作量，影响加载的性能。 2、推荐使用空间参考系为地理系的数据，其他投影系会在前端内部处理反投逻辑，影响加载的性能。

Name Type Description
options Object

构造参数

Name Type Default Description
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'表示采用默认的冲突解决策略。
Examples

创建聚类渲染器对象

// 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上聚类的实现依赖于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;
    });

Extends

Members

clusterBoundSymbolSimpleFillSymbol

聚合边界，显示聚合区域的范围

clusterInfosArray.<(UniqueValueClusterlnfo|ClassBreakClusterlnfo)>

聚合信息，描述聚合点数量区间内显示的符号信息。

defaultLabelExpressionInfoObject null

默认的文字表达式

defaultLabelSymbolTextSymbol

默认的文字符号

defaultSymbolSymbol

默认的聚合点符号，目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式

idString

渲染器id

isExpandOnClickBoolean

点击聚类点是否展开

isHoverShowBoundBoolean

鼠标悬停显示聚类边界

maxScaleNumber

最大聚类比例尺，单位为m，超过这个比例尺范围不进行聚类

radiusNumber

聚合半径，目前仅支持像素。

typeString

类型，默认为'cluster'

Methods

ClusterRenderer.fromJSON(json){ClusterRenderer}

document/renderer/ClusterRenderer.js, line 380
通过json构造ClusterRenderer对象
Name Type Description
json Object

json对象
Returns:
Type Description
ClusterRenderer ClusterRenderer实例

clone(){ClusterRenderer}

document/renderer/ClusterRenderer.js, line 419
克隆ClusterRenderer对象
Returns:
Type Description
ClusterRenderer 克隆后的ClusterRenderer实例

inherited fromJSON(json)

document/renderer/BaseRenderer.js, line 50

将JSON格式的渲染规则转换为JS对象

Name Type Description
json Object

渲染规则的实例化JSON

toJSON(){Object}

document/renderer/ClusterRenderer.js, line 390
导出json对象
Returns:
Type Description
Object json对象