类名 ClusterRenderer

# new ClusterRenderer(options)

聚类渲染器，多个点聚集在一起，会形成一个点符号

参数

名称 类型 默认值 描述
options Object

构造参数
radius Number 80

聚合半径，单位像素
clusterBoundSymbol SimpleFillSymbol

聚合边界，显示聚合区域的范围，仅支持部分样式
clusterInfos Array.<ClusterInfo>

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

默认的聚合点符号，目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式,不支持线图层
maxScale Number 20

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

点击聚类点是否展开
isHoverShowBound Boolean false

鼠标悬停显示聚类边界
defaultLabelSymbol TextSymbol

默认的文字符号
defaultLabelExpressionInfo Object | null

默认的文字表达式。以$cluster_count表示聚类点数量，例如 { expression: "$cluster_count + '个'"}。

支持如下方法：
[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上聚类的实现依赖于Leaflet.markercluster插件
链接地址:https://github.com/Leaflet/Leaflet.markercluster

 const layer = new IGSFeatureLayer({
        url: "http://webclient.smaryun.com: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;
    });

继承关系

成员变量

成员变量概述

名称 类型 描述
clusterBoundSymbol SimpleFillSymbol

聚合边界，显示聚合区域的范围
clusterInfos Array.<ClusterInfo>

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

默认的文字表达式
defaultLabelSymbol TextSymbol

默认的文字符号
defaultSymbol Symbol

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

点击聚类点是否展开
isHoverShowBound Boolean

鼠标悬停显示聚类边界
maxScale Number

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

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

类型，默认为'cluster'

成员变量详情

SimpleFillSymbol

# clusterBoundSymbol

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

Array.<ClusterInfo>

# clusterInfos

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

Object | null

# defaultLabelExpressionInfo

默认的文字表达式

TextSymbol

# defaultLabelSymbol

默认的文字符号

Symbol

# defaultSymbol

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

Boolean

# isExpandOnClick

点击聚类点是否展开

Boolean

# isHoverShowBound

鼠标悬停显示聚类边界

Number

# maxScale

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

Number

# radius

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

String

# readonly type

类型，默认为'cluster'

方法

方法概述

名称 返回值类型 描述
fromJSON ClusterRenderer 通过json构造ClusterRenderer对象
clone ClusterRenderer 克隆ClusterRenderer对象
fromJSON

将JSON格式的渲染规则转换为JS对象
toJSON Object 导出json对象

方法详情

# static fromJSON(json)

通过json构造ClusterRenderer对象

参数

名称 类型 描述
json Object

json对象

ClusterRenderer实例

ClusterRenderer

# clone()

克隆ClusterRenderer对象
Overrides:

克隆后的ClusterRenderer实例

ClusterRenderer

# fromJSON(json)

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

参数

名称 类型 描述
json Object

渲染规则的实例化JSON
Inherited From:

# toJSON()

导出json对象
Overrides:

json对象

Object