稀疏化

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

新加坡的道路和高速公路。放大和缩小以查看如何根据高速公路分类来稀疏化要素。只有更大、更繁忙的高速公路才会以小比例显示。这可减少初始下载大小并消除可视化效果。

什么是稀疏化？ ​

稀疏化是一种通过移除相互重叠的要素来整理视图的方法。当许多要素重叠并且希望显示整洁的数据，但不一定需要传达其密度时，这非常有用。

稀疏化的工作原理 ​

有两种稀疏化方法：

  1. 通过选择减少要素仅适用于 3D 场景中的点图层。要素缩减选择是在点图层的 featureReduction 属性上配置的。设置后，重叠要素会从视图中随机移除，并以不再与附近要素重叠的比例和相机角度显示。

  2. 比例驱动过滤是根据视图比例控制将哪些要素下载到客户端的过程。这对于减少大型图层的下载大小和改善可视化效果非常有用，特别是对于移动设备。

示例 ​

通过选择减少要素 (3D) ​

以下示例演示了如何通过随机移除重叠要素来整理视图。这是使用 3D 场景中点图层上的 FeatureReductionSelection 选项进行控制的。只需将图层上的 featureReduction 类型设置为 selection 即可自动稀疏化要素。

法国里昂的感兴趣点。稀疏化有助于整理视图，使用户能够轻松导航场景。取消选中右上角的框，以比较杂乱视图与整洁视图。放大和缩小以查看减少要素选择如何影响可视化。

GeoScene JS API

js
 pointsLayer.featureReduction = {
 type: "selection"
 };

比例驱动过滤 ​

此示例演示了如何根据视图比例控制将哪些要素下载到客户端。这对于减少大型图层的下载大小非常有用，特别是对于移动设备。

新加坡的道路和高速公路。放大和缩小以查看如何根据高速公路分类来稀疏化要素。只有更大、更繁忙的高速公路才会以小比例显示。这可减少初始下载大小并消除可视化效果。

例如，示例中图层包含超过 4600 万个高分辨率线要素，具有 20 多个属性。由于此图层需要数 GB 的内存，因此将整个数据集加载到浏览器是不可行的。

稀疏化这些数据可以显著提高初始下载大小和可视化效果。

稀疏化未稀疏化
初始下载大小141kB (27.8kB 压缩)12.2MB (2.1MB 压缩)
预览

首先，设置比例可见性约束，在给定数据密度的情况下以最适合的比例限制图层可见性。这由图层的 minScale 和 maxScale 属性控制。

js
    const highwaysLayer = new FeatureLayer({
        portalItem: {
            id: "af989f50f24040e4890dce13ee1b1561"
        },
        minScale: 1000000,
        maxScale: 0
    });

虽然这可防止用户向浏览器加载不合理数量的数据，但它仍然可能不具挑战性，尤其是对于移动设备。您可以通过在视图比例更改时更新图层的 definitionExpression 来动态过滤要素，从而进一步减少下载大小。

此代码片段显示了如何定义定义表达式（即 SQL where 子句）以在用户缩放到特定比例时应用于图层。请注意，建立显示优先级的方式。例如，只有最大的高速公路以最小的比例显示。随着用户逐渐放大，更多高速公路会根据其大小分类加载到视图中。这可确保仅将用户所需的最少数据下载到视图中，从而有效地将其稀疏化。

js
    const levels = [{
        minScale: Infinity,
        maxScale: 150000,
        definitionExpression: "highway IN ('motorway')"
    },{
        minScale: 150000,
        maxScale: 60000,
        definitionExpression: "highway IN ('motorway', 'trunk', 'trunk_link')"
    },{
        minScale: 60000,
        maxScale: 45000,
        definitionExpression:
        "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')"
    },{
        minScale: 45000,
        maxScale: 30000,
        definitionExpression:
        "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')"
    },{
        minScale: 30000,
        maxScale: 10000,
        definitionExpression:
        "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link', 'secondary', 'secondary_link')"
    }];

    // Update the definition expression based on view scale
    reactiveUtils.watch(
    () => view.scale,
    () => {
        let definitionExpression = null;
        const level = levels.find((level) => view.scale < level.minScale && view.scale >= level.maxScale);

        if (level) {
            definitionExpression = level.definitionExpression;
        }
        if (definitionExpression !== highwaysLayer.definitionExpression) {
            highwaysLayer.definitionExpression = definitionExpression;
        }
    });