For quickly applying web styles, features can be rendered using WebStyleSymbol. The symbol can be set either in a renderer, or directly on the graphic:
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
name: "Light_On_Post_-_Light_on",
portal: {
url: "https://www.arcgis.com"
},
styleName: "EsriRealisticStreetSceneStyle"
}
};
A WebStyleSymbol's size, rotation or color can't be directly modified. However, using its fetchSymbol() method, a PointSymbol3D representation of it can be retrieved and modified.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
webStyleSymbol.fetchSymbol().then((pointSymbol3D) => {
// clone the retrieved symbol, as properties on it are immutable
const newSymbol = pointSymbol3D.clone();
// the first symbolLayer contains the properties that can be modified
const symbolLayer = newSymbol.symbolLayers.getItemAt(0);
// change for example the height of the object
symbolLayer.height *= scale;
// do something with newSymbol, like setting it on a layer renderer
const newRenderer = layer.renderer.clone();
newRenderer.symbol = newSymbol;
layer.renderer = newRenderer;
});
Another way to modify WebStyleSymbols is by using them in a renderer with visualVariables. This sample creates a city scene of Logan square in Philadelphia. WebStyleSymbols are used for representing street lamps, benches, cars and vegetation. Using visualVariables we scale these features to their real world sizes.
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
const streetFurnitureRenderer = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "CATEGORY",
uniqueValueInfos: [
{
value: "Overhanging street",
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
name: "Overhanging_Street_-_Light_on",
styleName: "EsriRealisticStreetSceneStyle"
}
},
{
value: "Trash bin",
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
name: "Trash_bin_1",
styleName: "EsriRealisticStreetSceneStyle"
}
},
{
value: "Park bench 1",
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
name: "Park_bench_1",
styleName: "EsriRealisticStreetSceneStyle"
}
}
],
visualVariables: [
{
type: "rotation",
field: "ROTATION"
},
{
type: "size",
field: "SIZE",
axis: "height"
}
]
};
See the Visualizing points with 3D symbols guide to view a full list of all the 3D symbols and styles available for use in the WebStyleSymbol class. You can also experiment with any style using the Symbol Playground.