PointCloudLayer - toggle renderers

Point cloud data can be visualized in the browser using the PointCloudLayer. This sample shows how to define and apply different renderers to the PointCloudLayer. There are four different renderers that can be applied:

• PointCloudRGBRenderer
• PointCloudUniqueValueRenderer
• PointCloudStretchRenderer
• PointCloudClassBreaksRenderer

PointCloudRGBRenderer

PointCloudRGBRenderer is used to visualize points with the original scan color:

var pointCloudRGBRenderer = new PointCloudRGBRenderer({
  field: "RGB"
})

PointCloudUniqueValueRenderer

PointCloudUniqueValueRenderer can assign colors to points based on unique attribute values:

var pointCloudUniqueValueRenderer = new PointCloudUniqueValueRenderer({
 field: "CLASS_CODE", // field containing data for standard LAS classification
 colorUniqueValueInfos: [
   {
     values: ["1"], // unassigned
     label: "1",
     color: [180, 180, 180]
   },
   {
     values: ["2"], // ground
     label: "2",
     color: [222, 184, 135]
   },
   {
     values: ["3"], // low vegetation
     label: "3",
     color: [200, 232, 171]
   },
   {
     values: ["4"], // medium vegetation
     label: "4",
     color: [76, 112, 43]
   },
   {
     values: ["5"], // high vegetation
     label: "5",
     color: [76, 112, 43]
   },
   {
     values: ["6"], // building
     label: "6",
     color: [158, 40, 17]
   }
 ]
});

PointCloudStretchRenderer

PointCloudStretchRenderer maps a numeric attribute value to a continuous color ramp:

 var pointCloudStretchRenderer = new PointCloudStretchRenderer({
   field: "ELEVATION", // field containing elevation values
   stops: [{
     value: 7,
     color: [134, 204, 48]
   }, {
     value: 50,
     color: [204, 188, 48]
   }, {
     value: 171,
     color: [204, 56, 48]
   }]
 });

PointCloudClassBreaksRenderer

PointCloudClassBreaksRenderer is used when numerical values of an attribute are classified in different ranges. Points will then be colored based on the range they belong to:

 var pointCloudClassBreaksRenderer = new PointCloudClassBreaksRenderer({
   field: "INTENSITY", // field containing intensity values
   colorClassBreakInfos: [
   {
     minValue: 0,
     maxValue: 50,
     color: [239, 225, 21]
   }, {
     minValue: 51,
     maxValue: 150,
     color: [204, 149, 48]
   }, {
     minValue: 151,
     maxValue: 256,
     color: [204, 56, 48]
   }]
 });