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. You can use it 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 decide 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.

This 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() {
      const height = attribute("Height");
      const heightFraction = fraction(height, this.minParameter, this.maxParameter);
        const colorMix = COLORSPAN.map(c => {
          return color(c);
      return mixmap(heightFraction, colorMix);

This 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"))