比例感知型可视化

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

使用点密度渲染器样式化人口普查区，以按种族和民族显示人口密度

Web 地图通常跨越多个比例级别。这使得设置图层样式变得很复杂。例如，您可以在一个比例下定义效果很好的图标大小，但放大或缩小会很快将您的最佳制图决策转变为普通决策。 实际上，一个图标大小通常不适合所有比例。这对于密集图层尤其如此。

比例相关属性 ​

由于图标大小、线宽和密度不能在所有比例下都很好地显示，因此 GeoScene JS API 允许您根据视图比例配置各种符号和渲染器属性。

以下符号和渲染器属性可根据视图比例进行调整。

  1. 符号大小

  2. 多边形轮廓宽度

  3. 数据驱动大小范围 (即分级符号)

  4. 点密度值

符号大小 ​

可使用大小视觉变量动态更改点大小和线宽，以便其在任何比例下都能正常工作。您必须添加一个 Arcade 表达式，以将视图比例返回到大小变量（例如 $view.scale）。然后，可将特定比例值映射到 stops 属性中的大小。所有其他比例级别将线性插值大小。

以下代码片段将视图比例视为一个数据值。返回原始比例值，大小停止点中的值对应于比例级别。渲染器将以停止点中每个比例指示的大小显示点大小（或线宽）。

js

    renderer.visualVariables = [{
        type: "size",
        valueExpression: "$view.scale",
        stops: [
            // view scales larger than 1:1,155,581
            // will have a symbol size of 7.5 pts
            { size: 7.5, value: 1155581 },
            { size: 6, value: 9244648 },
            { size: 3, value: 73957190 },
            // view scales smaller than 1:591,657,527
            // will have a symbol size of 1.5 pts
            { size: 1.5, value: 591657527 }
        ]
    }];

示例 ​

以下示例演示如何按视图比例调整点的大小。此大小变量可用于任何点或线可视化，无论渲染器类型如何（只要它支持视觉变量）。

使用 Disable/enable auto size by scale 按钮可以探索不按比例调整图标大小如何影响各种比例级别的可视化效果。

按比例改变图标大小

js

    const sizeVV = {
        type: "size",

        valueExpression: "$view.scale",

        stops: [
            { size: 9, value: 1155581 },
            { size: 6, value: 9244648 },
            { size: 3, value: 73957190 },
            { size: 1.5, value: 591657527 }
        ]
        };


        const renderer = new SimpleRenderer({
            symbol: {
                type: "simple-marker",
                color: "dodgerblue",
                outline: {
                color: [255, 255, 255, 0.7],
                width: 0.5
            },
            size: "3px"
        },

        visualVariables: [ sizeVV ]

    });

多边形轮廓 ​

轮廓过粗可能会隐藏小要素，并分散可视化效果的目的。因此，许多人会直觉地移除轮廓。但是，这种做法可能会产生问题。 例如，下图显示了非常粗的轮廓，它们完全遮挡了休斯顿市中心区域中小多边形的填充颜色。

缩小了大轮廓

图 E：在此比例下，粗轮廓遮挡了大量的要素，使视觉效果难以解读。

这种轮廓宽度显然是不可接受的。但是，如果缩放到非常大的比例，该轮廓选择实际上效果很好。

放大大轮廓

图 F：在此比例下，粗轮廓不会分散视觉或模糊要素。

在大比例下移除轮廓后，将无法看到具有相同颜色的相邻要素的边界。

并排放大的轮廓

图 G：左图显示，移除轮廓会导致无法看到相似要素的边界。右图显示，添加轮廓可使这些边界清晰可见。

与按比例调整符号大小类似，可以使用 $view.scale Arcade 表达式通过大小视觉变量来调整多边形轮廓宽度。此方案需要将 target 属性设置为 outline，以便渲染器知道将大小变量应用于符号轮廓。

js
    renderer.visualVariables = [{
        type: "size",
        valueExpression: "$view.scale",
        target: "outline",
        stops: [
            { size: 2, value: 56187 },
            { size: 1, value: 175583 },
            { size: 0.5, value: 702332 },
            { size: 0, value: 1404664 }
        ]
    }];

示例 ​

以下示例演示了如何按视图比例调整多边形的轮廓。放大以观察轮廓的加粗过程。缩小以查看轮廓变细并最终消失的过程。

按比例改变轮廓宽度

js
    renderer.visualVariables = [{
        type: "size",
        valueExpression: "$view.scale",
        target: "outline",
        stops: [
            { size: 2, value: 56187 },
            { size: 1, value: 175583 },
            { size: 0.5, value: 702332 },
            { size: 0, value: 1404664 }
        ]
    }];

数据驱动大小范围 ​

您还可以按比例优化数据驱动连续大小（即分级符号）的可视化效果。这将导致整个符号范围在放大时变大，并在缩小时变小。当创建连续大小可视化时，设置与 minDataValue 和 maxDataValue 相对应的 minSize 和 maxSize。

js
    renderer.visualVariables = [{
        type: "size",
        field: "Population",
        minDataValue: 1,
        maxDataValue: 1000000,
        maxSize: 40,
        minSize: 4
    }]

您可以按比例调整所有符号大小的范围，即使它们随数据值而变化。在此情景中，必须将与比例相关的大小变量设置为 maxSize 和 minSize 属性。请参见下面的示例。

示例 ​

以下示例演示了如何调整符号大小，这些符号大小随视图比例的数据值而变化。

按比例划分大小范围

js
    visualVariables: [{
        type: "size",
        valueExpression: sizeValueExpression,
        valueExpressionTitle: "Shift in percentage points",
        minDataValue: 0,
        maxDataValue: 30,

        maxSize: {
            type: "size",
            valueExpression: "$view.scale",
            stops: [
                { size: 42, value: 288895 },
                { size: 38.6, value: 2311162 },
                { size: 24, value: 18489297 },
                { size: 11, value: 147914381 }
            ]
        },
        minSize: {
            type: "size",
            valueExpression: "$view.scale",
            stops: [
                { size: 8, value: 288895 },
                { size: 4, value: 2311162 },
                { size: 1, value: 18489297 },
                { size: 0.4, value: 147914381 }
            ]
        }
    }]

点密度值 ​

点密度可视化对视图比例很敏感。在常数点值下，当用户放大和缩小时，要素密度将显示不一致。DotDensityRenderer 允许您根据视图比例线性缩放点值。这是使用 referenceScale 属性配置的。当您放大和缩小初始视图时，点的相对密度在各个比例之间保持不变。

除了设置 referenceScale 之外，通常还应在图层上设置 minScale。当点不再可区分时，点密度可视化很难读取，因为它们合并在一起，或者太分散。

在图层上设置 maxScale 也很重要，因为在较大比例下，点密度地图往往变得不可读。用户可能会在随机分布的点中查看现实中不存在的模式。他们还可能会错误地将每个点的位置解释为实际的点要素。当 dotValue 设置为 1 时，用户特别容易受到这种情况的影响。例如，县数据集上的点密度可视化效果应仅在州或地区级别查看。

示例 ​

以下示例可视化了美国按种族划分的人口密度。在 1:577,790 的比例下，每个点代表 100 个人。dotValue 将在用户放大和缩小时自动调整。您可在图例中注意到这一变化。

js
    const dotDensityRenderer = new DotDensityRenderer({
        dotValue: 100,
        outline: null,
        referenceScale: 577790, // 1:577,790 view scale
        legendOptions: {
            unit: "people"
        }
    });