How to visualize data

You can style feature layers, which are composed of features, to help visualize the data in your application.

Feature styles

You can style points, lines, and polygons for visualization in a scene by defining symbols for features. To style features in a feature layer, you define symbols and apply them with a renderer. For data-driven visualization, the symbol is always determined based on a data (attribute) value returned from a field in the data layer.

To style a hosted feature layer in CesiumJS, add the feature layer to a scene as a GeoJsonDataSource then style the contents of the layer's EntityCollection. Each feature in the layer is represented as an Entity, which can display custom graphics. The attributes of each feature are stored in the entity's properties variable.

How to style a feature layer

1. Select an existing hosted feature layer, or create a new one in your portal by uploading a CSV, XLS, GeoJSON, or Shapefile.

2. In your CesiumJS application, add references to the ArcGIS REST JS request and feature-service packages.

3. Use arcgisRest.queryFeatures to query the URL of the feature service and return results as GeoJSON.

4. Add the REST JS response to your scene as a Cesium.GeoJsonDataSource. Pass properties in the LoadOptions to perform basic styling and clamp data to terrain.

5. After the layer is loaded, iterate through through each Entity created by the layer and set the Billboard, Point, Polyline, or Polygon properties. You can also represent data with a custom glTF Model.

Example

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
    const pointLayerURL = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0";

    arcgisRest.queryFeatures({
        url: pointLayerURL,
        authentication,
        f:"geojson"
    }).then((response) => {

      Cesium.GeoJsonDataSource.load(response,{
            clampToGround:true
      }).then((dataSource) => {

        dataSource.name="trailheads";
        viewer.dataSources.add(dataSource);

        const entities = dataSource.entities.values;
        for (let i=0; i<entities.length;i++) {
          entities[i].billboard.image = "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png"
          entities[i].billboard.scale=0.4;
        }

      })
    })

Tutorials

Style features

Use data-driven styling to apply symbol colors and styles to features.