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", // 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.
webStyleSymbol.fetchSymbol().then(function(pointSymbol3D) {
// clone the retrieved symbol, as properties on it are immutablevar newSymbol = pointSymbol3D.clone();
// the first symbolLayer contains the properties that can be modifiedvar 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 renderervar 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.