你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Web SDK 中聚类点数据

项目
08/29/2024

当地图上有许多数据点时，有些数据点可能会相互重叠。重叠可能会导致地图不可读且难以使用。聚类点数据是将相邻的点数据合并在一起，并在地图上将其作为单个聚类数据点进行呈现的过程。当用户放大地图时，聚类的各个数据点将会分开。处理大量数据点时，聚类过程可以改善用户体验。

对数据源启用聚类

通过将 cluster 选项设置为 true，在 DataSource 类中启用聚类。设置 clusterRadius 以选择附近的点，并将它们合并为聚类。 clusterRadius 的值以像素为单位。使用 clusterMaxZoom 指定禁用聚类逻辑的缩放级别。下面是如何在数据源中启用聚类的示例。

//Create a data source and enable clustering.
var datasource = new atlas.source.DataSource(null, {
    //Tell the data source to cluster point data.
    cluster: true,
    
    //The radius in pixels to cluster points together.
    clusterRadius: 45,
    
    //The maximum zoom level in which clustering occurs.
    //If you zoom in more than this, all points are rendered as symbols.
    clusterMaxZoom: 15
});

提示

如果两个数据点在地面上紧挨着，则聚类可能永远不会分解，无论用户放大多少倍。若要解决此情况，可以设置 clusterMaxZoom 选项以禁用聚类逻辑，只是显示所有内容。

DataSource 类还提供了以下与聚类有关的方法。

方法	返回类型	说明
getClusterChildren(clusterId: number)	Promise<Array<Feature<Geometry, any> \| Shape>>	在下一个缩放级别检索给定聚类的子级。这些子级可以是形状和子聚类的组合。子聚类是具有与 ClusteredProperties 匹配的属性的特征。
getClusterExpansionZoom(clusterId: number)	Promise<number>	计算聚类开始展开或分解的缩放级别。
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Array<Feature<Geometry, any> \| Shape>>	检索聚类中的点。默认情况下会返回前 10 个点。若要分页浏览点，请使用 `limit` 指定要返回的点数，并使用 `offset` 单步执行点索引。若要返回所有点，请将 `limit` 设置为 `Infinity`，并且不要设置 `offset`。

使用气泡层显示聚类

气泡层是呈现聚类点的好方法。使用表达式可基于聚类中的点数来缩放半径并更改颜色。如果使用气泡层显示聚类，则应使用单独的层来呈现非聚类数据点。

若要在气泡顶部显示聚类的大小，请将符号层与文本一起使用，而不要使用图标。

有关如何使用气泡层显示聚类的完整有效示例，请参阅 Azure Maps 示例中的气泡层中的点聚类。如需此示例的源代码，请参阅气泡层中的点聚类源代码。

使用符号层显示聚类

可视化数据点时，符号层会自动隐藏彼此重叠的符号，以确保获得更清晰的用户界面。如果要在地图上显示数据点密度，则可能不需要此默认行为。但是，可以更改这些设置。若要显示所有符号，请将符号层 iconOptions 属性的 allowOverlap 选项设置为 true。

使用聚类显示数据点密度，同时保持整洁的用户界面。下面的示例演示如何使用符号层添加自定义符号和表示聚类及各个数据点。

有关如何使用符号层显示聚类的完整有效示例，请参阅 Azure Maps 示例中的使用符号层显示聚类。如需此示例的源代码，请参阅使用符号层显示聚类源代码。

聚类和热度地图层

热度地图是在地图上显示数据密度的好方法。此可视化方法可以自行处理大量数据点。如果数据点进行了聚类，并且聚类大小用作热度地图的权重，则热度地图可以处理更多的数据。若要实现此选项，请将热度地图层的 weight 选项设置为 ['get', 'point_count']。在聚类半径较小时，热度地图看起来几乎与使用非聚类数据点的热度地图完全相同，但性能会更好。但是，聚类半径越小，热度地图便越精确，不过性能优势便越少。

有关演示如何创建在数据源上使用聚类的热度地图的完整有效示例，请参阅 Azure Maps 示例中的聚类加权热度地图。如需此示例的源代码，请参阅聚类权重热图源代码。

聚类数据点上的鼠标事件

当鼠标事件在包含聚类数据点的层上发生时，聚类数据点会作为 GeoJSON 点特征对象返回给事件。此点特征具有以下属性：

属性名称	类型	说明
`cluster`	boolean	指示特征是否表示聚类。
`cluster_id`	字符串	可与数据源 `getClusterExpansionZoom`、`getClusterChildren` 和 `getClusterLeaves` 方法结合使用的群集唯一 ID。
`point_count`	数字	聚类包含的点数。
`point_count_abbreviated`	字符串	用于缩写过长的 `point_count` 值的字符串。（例如，将 4,000 缩写为 4K）

气泡层中的点聚类示例采用气泡层来呈现聚类点和添加点击事件。当单击事件触发时，代码会计算地图，并将它缩放到下一个缩放级别，聚类将在该缩放级别分解。此功能使用 DataSource 类的 getClusterExpansionZoom 方法和所单击的聚类数据点的 cluster_id 属性来实现。

以下代码片段演示了气泡层中的点聚类示例中的代码，该代码将点击事件功能添加到聚类数据点：

//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterBubbleLayer, clusterClicked);

//Add mouse events to change the mouse cursor when hovering over a cluster.
map.events.add('mouseenter', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'pointer';
});

map.events.add('mouseleave', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'grab';
});

function clusterClicked(e) {
    if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
        //Get the clustered point from the event.
        var cluster = e.shapes[0];

        //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
        datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {

            //Update the map camera to be centered over the cluster. 
            map.setCamera({
                center: cluster.geometry.coordinates,
                zoom: zoom,
                type: 'ease',
                duration: 200
            });
        });
    }
}

显示聚类区域

聚类表示的点数据会分散在某个区域。在此示例中，当鼠标悬停在聚类上方时，会发生两种主要行为。首先，聚类中包含的各个数据点用于计算凸包。然后，凸包会显示在地图上以显示一个区域。凸包是一种多边形，用于包装一组点（如松紧带），可以使用 atlas.math.getConvexHull 方法进行计算。可以使用 getClusterLeaves 方法从数据源中检索包含在聚类中的所有点。

有关演示如何执行此操作的完整有效示例，请参阅 Azure Maps 示例中的使用凸包显示聚类区域。如需此示例的源代码，请参阅显示凸包聚类区域源代码。