Add edges to a SceneLayer

This sample shows how to visualize a SceneLayer in 3D. For a better perception of the buildings, their edges are also rendered using SolidEdges3D or SketchEdges3D. Thematic data is visualized by applying a color ramp based on the SceneLayer's attributes using visual variables.

White features represent buildings that are farther away from a public transport station and deep blue features represent buildings that are very close to one (less than 1 minute walking time). The color visual variable is set on the visual variables property of the renderer. The stops property sets up a color ramp by mapping min and max values to specific colors and interpolating intermediate values.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// Create the renderer and configure visual variables
const renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  // Add a default MeshSymbol3D. The color will be determined
  // by the visual variables
  symbol: {
    type: "mesh-3d",
    symbolLayers: [
      {
        type: "fill",
        material: {
          color: "#ffffff",
          colorMixMode: "replace"
        },
        edges: {
          type: "solid",
          color: [0, 0, 0, 0.6],
          size: 1.5
        }
      }
    ]
  },
  visualVariables: [
    {
      // specifies a visual variable of continuous color
      type: "color",
      // based on a field indicating the walking time to public transport
      field: "walkTimeToStopsInService",
      legendOptions: {
        title: "Walking time to public transport"
      },
      // color ramp from white to blue
      // based on the walking time to public transport.
      // Buildings will be assigned a color proportional to the
      // min and max colors specified below.
      stops: [
        {
          value: 1,
          color: "#2887a1",
          label: "less than 1 minute"
        },
        {
          value: 15,
          color: "#ffffff",
          label: "more than 15 minutes"
        }
      ]
    }
  ]
};

Keep in mind that attributes used in data-driven visualizations with visual variables must be accessible to a SceneLayer's cache. Keeping the number of cached attributes to a minimum improves the performance of the SceneLayer. Therefore it is best practice to be judicious with the attributes you make available through the service cache. See the ArcGIS Pro documentation to learn how to configure cached attributes in a Scene Service.

Additional visualization samples and resources

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.