@arcgis/core/symbols/ExtrudeSymbol3DLayer.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type Symbol3DLayer from "./Symbol3DLayer.js";
import type Edges3D from "./edges/Edges3D.js";
import type Symbol3DMaterial from "./support/Symbol3DMaterial.js";
import type { Symbol3DMaterialProperties } from "./support/Symbol3DMaterial.js";
import type { Edges3DProperties } from "./edges/Edges3D.js";
import type { Symbol3DLayerProperties } from "./Symbol3DLayer.js";

export interface ExtrudeSymbol3DLayerProperties extends Symbol3DLayerProperties, Partial<Pick<ExtrudeSymbol3DLayer, "castShadows" | "size">> {
  /**
   * Sets the contour edges on polygons symbolized with ExtrudeSymbol3DLayer.
   *
   * @since 4.7
   * @example
   * let symbol = {
   *   type: "polygon-3d", // autocasts as new PolygonSymbol3D()
   *   symbolLayers: [{
   *     type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
   *     material: {
   *       color: [244, 247, 134]
   *     },
   *     edges: {
   *       type: "solid", // autocasts as new SolidEdges3D()
   *       color: [50, 50, 50, 0.5]
   *     }
   *   }]
   * };
   */
  edges?: Edges3DProperties | null;
  /**
   * The material used to shade the extrusion. This property defines the extrusion's color and emissive properties.
   *
   * @example
   * // CSS color string
   * symbolLayer.material = {
   *   color: "dodgerblue"
   * };
   * @example
   * // HEX string
   * symbolLayer.material = {
   *   color: "#33cc33";
   * };
   * @example
   * // array of RGBA values
   * symbolLayer.material = {
   *   color: [51, 204, 51, 0.3];
   * };
   * @example
   * // object with rgba properties
   * symbolLayer.material = {
   *   color: {
   *     r: 51,
   *     g: 51,
   *     b: 204,
   *     a: 0.7
   *   }
   * };
   * @example
   * // object with emissive properties and color
   * symbolLayer.material: {
   *   color: "#00E9FF",
   *   emissive: { strength: 1, source: "color" },
   * };
   */
  material?: Symbol3DMaterialProperties | null;
}

/**
 * ExtrudeSymbol3DLayer is used to render [Polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon/) geometries
 * by extruding them upward from the ground, creating a 3D volumetric object. This is done
 * with a [PolygonSymbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/PolygonSymbol3D/) in a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/).
 * [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) does not support 3D symbols.
 *
 * The color of the symbol is set in the [material](https://developers.arcgis.com/javascript/latest/references/core/symbols/ExtrudeSymbol3DLayer/#material) property. The height of the extrusion is
 * always defined in meters with the [size](https://developers.arcgis.com/javascript/latest/references/core/symbols/ExtrudeSymbol3DLayer/#size) property. Extrusion height and color can also
 * be data-driven by adding [size](https://developers.arcgis.com/javascript/latest/references/core/renderers/SimpleRenderer/#visualVariables) and/or
 * [color visual variables](https://developers.arcgis.com/javascript/latest/references/core/renderers/SimpleRenderer/#visualVariables)
 * to any [Renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/) that uses this symbol layer.
 *
 * An ExtrudeSymbol3DLayer must be added to the `symbolLayers` property of
 * a [PolygonSymbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/PolygonSymbol3D/). Multiple symbol layers may be used in a single symbol.
 * The image below depicts a polygon [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/) representing
 * building footprints. The features are
 * symbolized with a [PolygonSymbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/PolygonSymbol3D/) containing an ExtrudeSymbol3DLayer.
 * The extrusion is based on the height of buildings.
 *
 * [![renderer-vv-size-3d](https://developers.arcgis.com/javascript/latest/assets/images/samples/9-vv-size-3d.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-extrusion/)
 *
 * See [Symbol3DLayer](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3DLayer/) and [Symbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3D/) to read
 * more general information about 3D symbols, symbol layers and how they relate to one another.
 *
 * @since 4.0
 * @see [Symbol Builder](https://developers.arcgis.com/javascript/latest/symbol-builder/)
 * @see [Sample - Visualize features thematically with extrusion](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-extrusion/)
 * @see [Sample - Extrude building footprints based on real world heights](https://developers.arcgis.com/javascript/latest/sample-code/visualization-buildings-3d/)
 * @see [Symbol3DLayer](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3DLayer/)
 * @see [Symbol3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol3D/)
 * @see [Renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/)
 * @see [ArcGIS blog - Working with objects, paths, and extrusion](https://blogs.esri.com/esri/arcgis/2016/01/25/3d-visualization-working-with-objects-paths-and-extrusion/)
 * @see [ArcGIS blog - Using attributes to represent real-world sizes of features](https://blogs.esri.com/esri/arcgis/2016/02/01/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features/)
 * @example
 * let symbol = {
 *   type: "polygon-3d",  // autocasts as new PolygonSymbol3D()
 *   symbolLayers: [{
 *     type: "extrude",  // autocasts as new ExtrudeSymbol3DLayer()
 *     size: 100000,  // 100,000 meters in height
 *     material: { color: "red" }
 *   }]
 * };
 */
export default class ExtrudeSymbol3DLayer extends Symbol3DLayer {
  constructor(properties?: ExtrudeSymbol3DLayerProperties);
  /**
   * Indicates whether the symbol layer geometry casts shadows in the scene. Setting this property to `false` will
   * disable shadows for the symbol layer even if direct shadows are enabled in [SceneView.environment](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#environment).
   *
   * @default true
   * @since 4.11
   * @example
   * // disables shadow casting
   * symbolLayer.castShadows = false;
   */
  accessor castShadows: boolean;
  /**
   * Sets the contour edges on polygons symbolized with ExtrudeSymbol3DLayer.
   *
   * @since 4.7
   * @example
   * let symbol = {
   *   type: "polygon-3d", // autocasts as new PolygonSymbol3D()
   *   symbolLayers: [{
   *     type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
   *     material: {
   *       color: [244, 247, 134]
   *     },
   *     edges: {
   *       type: "solid", // autocasts as new SolidEdges3D()
   *       color: [50, 50, 50, 0.5]
   *     }
   *   }]
   * };
   */
  get edges(): Edges3D | null | undefined;
  set edges(value: Edges3DProperties | null | undefined);
  /**
   * The material used to shade the extrusion. This property defines the extrusion's color and emissive properties.
   *
   * @example
   * // CSS color string
   * symbolLayer.material = {
   *   color: "dodgerblue"
   * };
   * @example
   * // HEX string
   * symbolLayer.material = {
   *   color: "#33cc33";
   * };
   * @example
   * // array of RGBA values
   * symbolLayer.material = {
   *   color: [51, 204, 51, 0.3];
   * };
   * @example
   * // object with rgba properties
   * symbolLayer.material = {
   *   color: {
   *     r: 51,
   *     g: 51,
   *     b: 204,
   *     a: 0.7
   *   }
   * };
   * @example
   * // object with emissive properties and color
   * symbolLayer.material: {
   *   color: "#00E9FF",
   *   emissive: { strength: 1, source: "color" },
   * };
   */
  get material(): Symbol3DMaterial | null | undefined;
  set material(value: Symbol3DMaterialProperties | null | undefined);
  /**
   * The height of the extrusion in meters. Negative values will extrude the
   * polygon surface downward towards or below the ground.
   *
   * @default 1
   * @example
   * // polygon is extruded 50,000 meters
   * symbolLayer.size = 50000;
   */
  accessor size: number;
  /** The symbol type. */
  get type(): "extrude";
  /**
   * Creates a deep clone of the symbol layer.
   *
   * @returns A deep clone of the object that
   *                                                      invoked this method.
   * @example
   * // Creates a deep clone of the graphic's first symbol layer
   * let symLyr = graphic.symbol.symbolLayers.at(0).clone();
   */
  clone(): ExtrudeSymbol3DLayer;
}