Visualize features with realistic WebStyleSymbols

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"
  }
};

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;
});

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"
    }
  ]
};