PointCloudLayer - toggle renderers

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

Point cloud data can be visualized in the browser using the PointCloudLayer. The visualization of each point (its color and size) is defined by a renderer. There are four renderer types that may be applied to point cloud data:

• PointCloudRGBRenderer
• PointCloudUniqueValueRenderer
• PointCloudStretchRenderer
• PointCloudClassBreaksRenderer

These renderers can be created manually using the API defined in the documentation, or generated using the Smart Mapping APIs. There are three renderer creator methods that simplify the renderer creation process for PointCloudLayer:

• colorRendererCreator.createPCTrueColorRenderer() - Generates a renderer that visualizes points with the original scan color
• typeRendererCreator.createPCClassRenderer() - Generates a renderer that visualizes each point based on unique values, such as classification codes (e.g. high vegetation, water, etc.)
• colorRendererCreator.createPCContinuousRenderer() - Generates a renderer that visualizes each point along a continuous color ramp (e.g. intensity or elevation)

This sample shows how to call each of these methods and apply different renderers to the PointCloudLayer. The renderer used for the visualization depends on a given field name. Typical field names for point clouds include ELEVATION, RGB, CLASS_CODE, and INTENSITY. For example, rather than map colors to a long list of class codes in a PointCloudUniqueValueRenderer, you can simply call the createPCClassRenderer() method to generate the standard colors for the data based on the CLASS_CODE field:

var layer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer"
});

// generates colors for visualizing each class code
typeRendererCreator.createPCClassRenderer({
  layer: layer,
  field: "CLASS_CODE"
}).then(function(response){
  // set the renderer on the input layer
  layer.renderer = response.renderer;
});

This sample uses a custom function to generate the appropriate renderer based on a given field name.

// stores generated renderers to avoid making service
// calls for the same renderer multiple times
var renderersByField = {
  RGB: null,
  CLASS_CODE: null,
  ELEVATION: null,
  INTENSITY: null
};

function getRenderer(fieldName){
  // If the renderer is already generated, then return it
  if(renderersByField[fieldName]){
    return promiseUtils.resolve(renderersByField[fieldName]);
  }

  // Store the generated renderer in a predefined object in
  // case it is requested in the future and return the renderer
  function responseCallback(response){
    renderersByField[fieldName] = response.renderer;
    return response.renderer;
  }

  if(fieldName === "RGB"){
    return colorRendererCreator.createPCTrueColorRenderer({
      layer: pcLayer
    })
    .then(responseCallback);
  }
  if(fieldName === "CLASS_CODE"){
    return typeRendererCreator.createPCClassRenderer({
      layer: pcLayer,
      field: fieldName
    })
    .then(responseCallback);
  }
  if(fieldName === "ELEVATION" || "INTENSITY"){
    return colorRendererCreator.createPCContinuousRenderer({
      layer: pcLayer,
      field: fieldName
    })
    .then(responseCallback);
  }
}

Additional resources

See the following samples to learn how to manually create the renderers listed above rather than using the Smart Mapping APIs to do so:

• PointCloudLayer - change point size and density
• PointCloudLayer - intensity color modulation