# new ClusterRenderer(options)

参数

支持如下方法：

示例

创建聚类渲染器对象

// 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;
    });