稀疏化

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

什么是稀疏化？

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

稀疏化的工作原理

有两种稀疏化方法：

通过选择减少要素仅适用于 3D 场景中的点图层。要素缩减选择是在点图层的 featureReduction 属性上配置的。设置后，重叠要素会从视图中随机移除，并以不再与附近要素重叠的比例和相机角度显示。
比例驱动过滤是根据视图比例控制将哪些要素下载到客户端的过程。这对于减少大型图层的下载大小和改善可视化效果非常有用，特别是对于移动设备。

示例

通过选择减少要素（3D）

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

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

GeoScene JS API
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      Point styles for cities
    </title>
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #cityStyle {
        background-color: white;
        text-align: center;
        padding: 10px;
        font-size: 0.9em;
      }

      #cityStyle label {
        padding-right: 10px;
        cursor: pointer;
      }
    </style>

    <script>
      require([
        "geoscene/WebScene",
        "geoscene/layers/FeatureLayer",
        "geoscene/views/SceneView",
        "geoscene/widgets/Legend"
      ], (WebScene, FeatureLayer, SceneView, Legend) => {
        // Load the webscene with buildings

        const webscene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "711ddecedece4fd88b728bfe4322c22b"
          }
        });

        const view = new SceneView({
          container: "viewDiv",
          map: webscene,
          environment: {
            lighting: {
              directShadowsEnabled: true,
              ambientOcclusionEnabled: true
            }
          }
        });

        // verticalOffset shifts the symbol vertically
        const verticalOffset = {
          screenLength: 40,
          maxWorldLength: 200,
          minWorldLength: 35
        };

        // Function that automatically creates the symbol for the points of interest
        function getUniqueValueSymbol(name, color) {
          return {
            type: "point-3d",
            symbolLayers: [
              {
                type: "icon",
                resource: {
                  href: name
                },
                size: 20,
                outline: {
                  color: "white",
                  size: 2
                }
              }
            ],

            verticalOffset: verticalOffset,

            callout: {
              type: "line",
              color: "white",
              size: 2,
              border: {
                color: color
              }
            }
          };
        }

        const pointsRenderer = {
          type: "unique-value",
          field: "Type",
          uniqueValueInfos: [
            {
              value: "Museum",
              symbol: getUniqueValueSymbol(
                "https://developers.geoscene.cn/javascript/latest/sample-code/visualization-point-styles/live/Museum.png",
                "#D13470"
              )
            },
            {
              value: "Restaurant",
              symbol: getUniqueValueSymbol(
                "https://developers.geoscene.cn/javascript/latest/sample-code/visualization-point-styles/live/Restaurant.png",
                "#F97C5A"
              )
            },
            {
              value: "Church",
              symbol: getUniqueValueSymbol(
                "https://developers.geoscene.cn/javascript/latest/sample-code/visualization-point-styles/live/Church.png",
                "#884614"
              )
            },
            {
              value: "Hotel",
              symbol: getUniqueValueSymbol(
                "https://developers.geoscene.cn/javascript/latest/sample-code/visualization-point-styles/live/Hotel.png",
                "#56B2D6"
              )
            },
            {
              value: "Park",
              symbol: getUniqueValueSymbol(
                "https://developers.geoscene.cn/javascript/latest/sample-code/visualization-point-styles/live/Park.png",
                "#40C2B4"
              )
            }
          ]
        };

        const pointsLayer = new FeatureLayer({
          url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LyonPointsOfInterest/FeatureServer",
          title: "Touristic attractions",
          elevationInfo: {
            mode: "relative-to-scene"
          },
          renderer: pointsRenderer,
          outFields: ["*"],
          screenSizePerspectiveEnabled: true,
          labelingInfo: [
            {
              labelExpressionInfo: {
                value: "{Name}"
              },
              symbol: {
                type: "label-3d",
                symbolLayers: [
                  {
                    type: "text",
                    material: {
                      color: "white"
                    },
                    halo: {
                      size: 1,
                      color: [50, 50, 50]
                    },
                    size: 10
                  }
                ]
              }
            }
          ]
        });


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


        webscene.add(pointsLayer);

        // add functionality on the controls for selection, perspective, callout lines and relative-to-scene elevation mode
        document
          .getElementById("cityStyle")
          .addEventListener("change", (event) => {
            if (event.target.id === "declutter") {
              const type = {
                type: "selection"
              };
              pointsLayer.featureReduction = event.target.checked ? type : null;
            }
          });

        view.ui.add(document.getElementById("cityStyle"), "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv" class="geoscene-widget"></div>
    <div id="cityStyle">
      <input type="checkbox" id="declutter" name="mode" checked />
      <label for="declutter">Declutter view</label>
    </div>
  </body>
</html>

比例驱动过滤

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

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

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

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

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

GeoScene JS API
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Highways in Singapore
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: white;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>
      require([
        "geoscene/views/MapView",
        "geoscene/WebMap",
        "geoscene/layers/FeatureLayer"
      ], (
        MapView,
        WebMap,
        FeatureLayer
      ) => {


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


        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            basemap: "gray-vector",
            layers: [ highwaysLayer ]
          }),
          constraints: {
            snapToZoom: false
          },
          viewpoint: {
            rotation: 0,
            scale: 175000,
            targetGeometry: {
              type: "point",
              spatialReference: {
                latestWkid: 3857,
                wkid: 102100
              },
              x: 11557036.825180829,
              y: 147507.71438237422
            }
          }
        });


        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
        view.watch("scale", function(scale){
          let definitionExpression = null;
          const level = levels.find(
            level =>
            scale < level.minScale && scale >= level.maxScale
          );

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


      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

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

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

GeoScene JS API
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Highways in Singapore
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: white;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>
      require([
        "geoscene/views/MapView",
        "geoscene/WebMap",
        "geoscene/layers/FeatureLayer"
      ], (
        MapView,
        WebMap,
        FeatureLayer
      ) => {


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


        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            basemap: "gray-vector",
            layers: [ highwaysLayer ]
          }),
          constraints: {
            snapToZoom: false
          },
          viewpoint: {
            rotation: 0,
            scale: 175000,
            targetGeometry: {
              type: "point",
              spatialReference: {
                latestWkid: 3857,
                wkid: 102100
              },
              x: 11557036.825180829,
              y: 147507.71438237422
            }
          }
        });


        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')"
        }];

        // 根据视图比例更新定义表达式
        view.watch("scale", function(scale){
          let definitionExpression = null;
          const level = levels.find(
            level =>
            scale < level.minScale && scale >= level.maxScale
          );

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


      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

城市的点样式

FeatureReductionSelection

阅读参考手册以获取更多信息。

API 支持

下表描述了非常适合每种可视化技术的几何和视图类型。

	2D	线	面	客户端	服务器端
聚类
热点图
不透明度
光晕
聚合
稀疏化	¹	¹	¹	²	³
可见比例范围

全部支持部分支持不支持

1. 不支持通过选择减少要素
2. 仅支持通过选择减少要素
3. 仅支持比例驱动过滤

上一主题聚合下一主题可见比例范围

GeoScene API for JavaScript

稀疏化