网格图

字数统计: 1.6k 字
阅读时长: 约 3 分钟
当前版本: 4.29

网格分辨率为3时 Argo 浮标的聚合效果。在区域范围内，Level 3 级可能很有用，但全球视图下需要降低级别级别。通过网格化可以基于地理格网显示要素密度

什么是网格化？ ​

网格化是将数据聚合到预定义的像元中，有效地将点数据转化为格网面图层。通常，使用连续色带设置网格的样式，并使用网格包含的点数进行标注。JS API 使用 Geohash 地理编码来创建网格。这是显示点密度的有效方法。与聚类不同，网格化显示的是地理空间中的点密度，而不是屏幕空间上的点密度。

网格图对空间上元素覆盖或非常相近时是非常有效的可视化方法。使用上面的卷帘可以对比原始点图层与网格化后的数据

注： 网格图仅适用于 MapView 中 point 类型图层。

为什么网格化有用？ ​

大型点图层可能具有欺骗性。看起来只有几个点，但实际上因为点重叠，可能会是几千个。网格化允许您直观地表示像元地理格网中的点密度。例如，以下地图显示了数千个 Argo 浮标的位置。区域 A 和 B 点密度都高，在没有其他帮助的情况下，无法进行比较。

已禁用网格化

区域 A 和区域 B 都具有高密度的点，无法直观分辨每个区域中有多少个点重叠

但是，启用网格化后，用户即可清楚地比较两个区域的密度。

已启用网格化

通过网格化，用户对区域内点数量一目了然

如何设置网格化 ​

网格化通过图层的 featureReduction 属性中配置。将 featureReduction 类型设置为 binning，即可启用网格化。

js
    layer.featureReduction = {
        type: "binning"
    };

网格化没有对应的默认渲染器，但 featureReduction 属性提供了许多其他网格化属性，包括有：

  • fixedBinLevel - 格网分辨率 (仅接受值 1-9)。数字越大，分辨率越高。数字越低，分辨率越低

  • fields - 聚合字段

  • renderer - 定义网格的样式

  • popupTemplate - 单击网格时的弹框设置

  • labels - 网格标注

示例 ​

基本网格化 ​

以下示例演示了如何在点图层上启用网格化，如何配置渲染、标注以及用于显示每个网格内点计数的弹出窗口。启用网格化时，必须指定一个介于 1-9 之间的 fixedBinLevel。根据数据范围选择网格级别。下表描述了给定数据范围的建议网格级别。

固定网格级别建议的数据范围
1-3全球范围
3-5国家或省、自治区
5-7县、市
7-9超局部区域 (例如社区和建筑物)

另外必须设置聚合字段，网格可视化才变得有意义。如果要在网格内创建点计数的聚合字段，可以使用 count 统计类型。

js
    layer.featureReduction = {
        type: "binning",
        fixedBinLevel: 2,
        fields: [{
            name: "aggregateCount",
            statisticType: "count"
        }]
    };

为每个网格配置渲染、标注和弹出窗口时，与在图层上进行配置这些一样，只是这里我们必须引用 FeatureReductionBinning.fields 中定义的聚合字段，而不是原始数据图层的字段。通常情况下，网格适合使用渐变色的颜色视觉变量进行样式设置，如下例所示。

Level为2时 Argo 浮标的聚合效果。这是一个很好的全球数据分辨率

js
    const featureReduction = {
        type: "binning",
        fixedBinLevel: 2,
        fields: [{
            name: "aggregateCount",
            alias: "Total count",
            statisticType: "count"
        }],
        renderer: {
            type: "simple",
            symbol: {
                type: "simple-fill",
                color: [0, 255, 71, 1],
                outline: null,
                outline: {
                color: colors[0],
                width: 0
            }
        },
        visualVariables: [{
            type: "color",
            field: "aggregateCount",
            legendOptions: {
                title: "Number of floats"
            },
            stops: [
                { value: 0, color: colors[0] },
                { value: 25, color: colors[1] },
                { value: 50, color: colors[2] },
                { value: 75, color: colors[3] },
                { value: 100, color: colors[4] }
            ]
        }]
    },

组合网格化样式 ​

面图层的渲染都可以用用在设置网格的样式上。此示例演示了如何基于两个聚合字段来可视化网格。总计数使用大小视觉变量进行可视化，每次车祸中受伤的平均人数使用颜色视觉变量进行可视化。

车祸 (2020)数据在级别为6下的聚合效果。每个符号的大小表示车祸的总数。颜色表示每次车祸中受伤司机的平均人数

js
    const featureReduction = {
        type: "binning",
        fixedBinLevel: 6,
        fields: [
            new AggregateField({
                name: "aggregateCount",
                statisticType: "count"
            }),
            new AggregateField({
                name: "AVG_MOTORIST_INJURED",
                alias: "Ratio of motorist injuries to crashes",
                onStatisticField: "NUMBER_OF_MOTORIST_INJURED",
                statisticType: "avg"
            }),
        ],
        renderer: {
            type: "simple",
            symbol: {
                type: "simple-marker",
                color: [0, 255, 71, 1],
                outline: null,
                outline: {
                    color: "rgba(153, 31, 23, 0.3)",
                width: 0.3
            }
        },

        visualVariables: [{
            type: "size",
            field: "aggregateCount",
            legendOptions: {
                title: "Total crashes"
            },
            minSize: {
                type: "size",
                valueExpression: "$view.scale",
                stops: [
                    { value: 18055, size: 18 },
                    { value: 36111, size: 12 },
                    { value: 72223, size: 8 },
                    { value: 144447, size: 4 },
                    { value: 288895, size: 2 },
                    { value: 577790, size: 1 }
                ]
            },
            maxSize: {
                type: "size",
                valueExpression: "$view.scale",
                stops: [
                    { value: 18055, size: 48 },
                    { value: 36111, size: 32 },
                    { value: 72223, size: 24 },
                    { value: 144447, size: 18 },
                    { value: 288895, size: 12 },
                    { value: 577790, size: 6 }
                ]
            },
            minDataValue: 10,
            maxDataValue: 300
        },{
            type: "color",
            field: "AVG_MOTORIST_INJURED",
            legendOptions: {
                title: "% of motorists injured per crash"
            },
            stops: [
                { value: 0, color: colors[0], label: "No injuries" },
                { value: 0.1, color: colors[1] },
                { value: 0.3, color: colors[2], label: "30%" },
                { value: 0.5, color: colors[3] },
                { value: 0.75, color: colors[4], label: ">75%" }
            ]
        }]
    }
};