Visualize features with realistic WebStyleSymbols
Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
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:
var renderer = {
type: "simple",
symbol: {
type: "web-style",
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.
webStyleSymbol.fetchSymbol().then(function(pointSymbol3D){
var newSymbol = pointSymbol3D.clone();
var symbolLayer = newSymbol.symbolLayers.getItemAt(0);
symbolLayer.height *= scale;
var 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.
var streetFurnitureRenderer = {
type: "unique-value",
field: "CATEGORY",
uniqueValueInfos: [{
value: "Overhanging street",
symbol: {
type: "web-style",
name: "Overhanging_Street_-_Light_on",
styleName: "EsriRealisticStreetSceneStyle"
}
}, {
value: "Trash bin",
symbol: {
type: "web-style",
name: "Trash_bin_1",
styleName: "EsriRealisticStreetSceneStyle"
}
}, {
value: "Park bench 1",
symbol: {
type: "web-style",
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.