ogc3dtiles railways
Figure 1. An OGC 3D Tiles set visualized using a color map based on its height attribute.

The main class for styling and filtering point cloud data is PointCloudStyle. It allows you to define several types of expressions to visualize and filter your dataset:

  • visibilityExpression: create an expression to make points visible or invisible based on point cloud attributes and parameters.

  • colorExpression: create an expression to determine the color of a point based on attributes and parameters.

  • scaleExpression: scale the size of your points based on attributes and parameters.

See Property-based styling and filtering of points on a WebGLMap for more information about styling based on expressions.

As an example, the following code snippet demonstrates how to create the height-based gradient styling in Figure 1, “An OGC 3D Tiles set visualized using a color map based on its height attribute.”:

Program: Creating height-based gradient styling for point clouds using expressions. (from samples/ogc3d/ExpressionService.js)
    minParameter: numberParameter(DEFAULTCOLORHEIGHT[0]),
    maxParameter: numberParameter(DEFAULTCOLORHEIGHT[1]),
    expression: function() {
      var height = attribute("Height");
      var heightFraction = fraction(height, this.minParameter, this.maxParameter);
        var colorMix = COLORSPAN.map(function(c) {
          return color(c);
        });
      return mixmap(heightFraction, colorMix);
      }

The next example illustrates how to use expressions to filter out points between two height values:

Program: Creating a point filter expression that limits visibility of points between a minimum and maximum value using expressions. (from samples/ogc3d/ExpressionService.js)
    minParameter: numberParameter(DEFAULTVISIBILITYHEIGHT[0]),
    maxParameter: numberParameter(DEFAULTVISIBILITYHEIGHT[1]),
    expression: function() {
        // The expression evaluates to true/false value
      return and(
          lt(this.minParameter, attribute("Height")),
          gt(this.maxParameter, attribute("Height"))
        );
      }