@arcgis/core/Graphic.d.ts

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

import type PopupTemplate from "./PopupTemplate.js";
import type GraphicOrigin from "./graphic/GraphicOrigin.js";
import type Layer from "./layers/Layer.js";
import type BuildingComponentSublayer from "./layers/buildingSublayers/BuildingComponentSublayer.js";
import type KnowledgeGraphSublayer from "./layers/knowledgeGraph/KnowledgeGraphSublayer.js";
import type Sublayer from "./layers/support/Sublayer.js";
import type SubtypeSublayer from "./layers/support/SubtypeSublayer.js";
import type { ClonableMixin } from "./core/Clonable.js";
import type { JSONSupport } from "./core/JSONSupport.js";
import type { GeometryUnion } from "./geometry/types.js";
import type { SymbolUnion } from "./symbols/types.js";
import type { ObjectId } from "./views/types.js";
import type { MeshProperties } from "./geometry/Mesh.js";
import type { PolylineProperties } from "./geometry/Polyline.js";
import type { PolygonProperties } from "./geometry/Polygon.js";
import type { PointProperties } from "./geometry/Point.js";
import type { MultipointProperties } from "./geometry/Multipoint.js";
import type { ExtentProperties } from "./geometry/Extent.js";
import type { PopupTemplateProperties } from "./PopupTemplate.js";
import type { WebStyleSymbolProperties } from "./symbols/WebStyleSymbol.js";
import type { PolygonSymbol3DProperties } from "./symbols/PolygonSymbol3D.js";
import type { PointSymbol3DProperties } from "./symbols/PointSymbol3D.js";
import type { MeshSymbol3DProperties } from "./symbols/MeshSymbol3D.js";
import type { LineSymbol3DProperties } from "./symbols/LineSymbol3D.js";
import type { LabelSymbol3DProperties } from "./symbols/LabelSymbol3D.js";
import type { CIMSymbolProperties } from "./symbols/CIMSymbol.js";
import type { TextSymbolProperties } from "./symbols/TextSymbol.js";
import type { SimpleMarkerSymbolProperties } from "./symbols/SimpleMarkerSymbol.js";
import type { SimpleLineSymbolProperties } from "./symbols/SimpleLineSymbol.js";
import type { SimpleFillSymbolProperties } from "./symbols/SimpleFillSymbol.js";
import type { PictureMarkerSymbolProperties } from "./symbols/PictureMarkerSymbol.js";
import type { PictureFillSymbolProperties } from "./symbols/PictureFillSymbol.js";

export interface GraphicProperties extends Partial<Pick<Graphic, "aggregateGeometries" | "attributes" | "layer" | "origin" | "visible">> {
  /**
   * The geometry that defines the graphic's location.
   *
   * > [!WARNING]
   * >
   * > **Z-values** defined in a geographic or metric coordinate system are
   * > expressed in meters. However, in local scenes that use a
   * > projected coordinate system, vertical units are assumed to be the same as the
   * > horizontal units specified by the service.
   *
   * @example
   * // First create a point geometry
   * let point = {
   *   type: "point",  // autocasts as new Point()
   *   longitude: -71.2643,
   *   latitude: 42.0909
   * };
   *
   * // Create a symbol for drawing the point
   * let markerSymbol = {
   *   type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
   *   color: [226, 119, 40]
   * };
   *
   * // Create a graphic and add the geometry and symbol to it
   * let pointGraphic = new Graphic({
   *   geometry: point,
   *   symbol: markerSymbol
   * });
   */
  geometry?: ((ExtentProperties & { type: "extent" }) | (MultipointProperties & { type: "multipoint" }) | (PointProperties & { type: "point" }) | (PolygonProperties & { type: "polygon" }) | (PolylineProperties & { type: "polyline" }) | (MeshProperties & { type: "mesh" })) | null;
  /**
   * The template for displaying content in a [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/)
   * when the graphic is selected. The [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) may be used to access
   * a graphic's [attributes](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#attributes) and display their values in the view's
   * default popup. See the documentation for [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) for details on
   * how to display attribute values in the popup.
   *
   * As of 4.8, to get the actual `popupTemplate` of the graphic, see the [getEffectivePopupTemplate()](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#getEffectivePopupTemplate)
   * method that either returns this value or the `popupTemplate` of the graphic's layer.
   *
   * @see [getEffectivePopupTemplate()](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#getEffectivePopupTemplate)
   * @example
   * // The following snippet shows how to set a popupTemplate
   * // on the returned results (features) from identify
   *
   *  idResult.feature.popupTemplate = {
   *  title: "{NAME}",
   *    content: [{
   *      // Pass in the fields to display
   *      type: "fields",
   *      fieldInfos: [{
   *        fieldName: "NAME",
   *        label: "Name"
   *      }, {
   *        fieldName: "REGION",
   *        label: "Region"
   *     }]
   *    }]
   * };
   */
  popupTemplate?: PopupTemplateProperties | null;
  /**
   * The [Symbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol/) for the graphic. Choosing a symbol for a graphic depends on the [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) type (SceneView or MapView),
   * and the [geometry type](https://developers.arcgis.com/javascript/latest/references/core/geometry/Geometry/#type) of the graphic.
   *
   * Each graphic may have its own symbol specified when the parent layer is a [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/).
   * For a [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/) the symbol of each graphic should not be set by the developer since the
   * graphics' rendering properties are determined by the layer's [Renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/).
   *
   * To change a graphic's [Symbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol/) in the [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/) and in the [View.graphics](https://developers.arcgis.com/javascript/latest/references/core/views/View/#graphics) at runtime, one of the following can be done:
   * 1. Clone the symbol and change its properties.
   * 2. Assign a new symbol to the graphic.
   *
   * @example
   * view.on("click", function(event){
   *   let graphic = new Graphic({
   *     geometry: event.mapPoint,
   *     symbol: {
   *       type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
   *       color: "blue",
   *       size: 8,
   *       outline: { // autocasts as new SimpleLineSymbol()
   *         width: 0.5,
   *         color: "darkblue"
   *       }
   *     }
   *   });
   * });
   */
  symbol?: (((PictureFillSymbolProperties & { type: "picture-fill" }) | (PictureMarkerSymbolProperties & { type: "picture-marker" }) | (SimpleFillSymbolProperties & { type: "simple-fill" }) | (SimpleLineSymbolProperties & { type: "simple-line" }) | (SimpleMarkerSymbolProperties & { type: "simple-marker" }) | (TextSymbolProperties & { type: "text" }) | (CIMSymbolProperties & { type: "cim" })) | ((LabelSymbol3DProperties & { type: "label-3d" }) | (LineSymbol3DProperties & { type: "line-3d" }) | (MeshSymbol3DProperties & { type: "mesh-3d" }) | (PointSymbol3DProperties & { type: "point-3d" }) | (PolygonSymbol3DProperties & { type: "polygon-3d" })) | (WebStyleSymbolProperties & { type: "web-style" })) | null;
}

export type GraphicLayer = Layer | SubtypeSublayer | Sublayer | BuildingComponentSublayer | KnowledgeGraphSublayer;

/**
 * A Graphic is a vector representation of real world geographic phenomena.
 * It can contain [geometry](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#geometry), a [symbol](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#symbol), and [attributes](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#attributes).
 * A Graphic is displayed in the [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/).
 *
 * To learn how to work with graphics, see the
 * [Intro to graphics](https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/) tutorial.
 *
 * ```js
 * let polyline = {
 *   type: "polyline",  // autocasts as new Polyline()
 *     paths: [
 *       [-111.30, 52.68],
 *       [-98, 49.5],
 *       [-93.94, 29.89]
 *     ]
 * };
 *
 * let polylineSymbol = {
 *   type: "simple-line",  // autocasts as SimpleLineSymbol()
 *   color: [226, 119, 40],
 *   width: 4
 * };
 *
 * let polylineAtt = {
 *   Name: "Keystone Pipeline",
 *   Owner: "TransCanada"
 * };
 *
 * let polylineGraphic = new Graphic({
 *   geometry: polyline,
 *   symbol: polylineSymbol,
 *   attributes: polylineAtt
 * });
 *
 * view.graphics.add(polylineGraphic);
 * ```
 *
 * @since 4.0
 * @see [Intro to graphics](https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/)
 * @see [Sample - Add graphics (SceneView)](https://developers.arcgis.com/javascript/latest/sample-code/graphics-basic-3d/)
 * @see [Sample - Query Elevation (points)](https://developers.arcgis.com/javascript/latest/sample-code/elevation-query-points/)
 * @see [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/)
 * @see [Geometry](https://developers.arcgis.com/javascript/latest/references/core/geometry/Geometry/)
 */
export default class Graphic extends GraphicSuperclass {
  constructor(properties?: GraphicProperties);
  /**
   * The aggregateGeometries contains spatial aggregation geometries when [statistics](https://developers.arcgis.com/javascript/latest/references/core/rest/support/StatisticDefinition/#statisticType) query is executed with
   * `envelope-aggregate`, `centroid-aggregate` and/or `convex-hull-aggregate` statistics type. Each property on aggregateGeometries is populated with
   * [statistics field](https://developers.arcgis.com/javascript/latest/references/core/rest/support/StatisticDefinition/#outStatisticFieldName) containing the aggregate geometry matching the aggregate statistics type.
   *
   * @since 4.23
   * @see [StatisticDefinition.statisticType](https://developers.arcgis.com/javascript/latest/references/core/rest/support/StatisticDefinition/#statisticType)
   * @example
   * // average of age fields by regions
   * const ageStatsByRegion = new StatisticDefinition({
   *   onStatisticField: field,
   *   outStatisticFieldName: "avgAge",
   *   statisticType: "avg"
   * });
   *
   * // extent encompassing all features by region
   * const aggregatedExtent = new StatisticDefinition({
   *   statisticType: "envelope-aggregate",
   *   outStatisticFieldName: "aggregateExtent",
   * });
   *
   * // group the statistics by Region field
   * // get avg age by Regions and extent of each region
   * const query = layer.createQuery();
   * query.groupByFieldsForStatistics = ["Region"];
   * query.outStatistics = [consumeStatsByRegion, aggregatedExtent];
   * layer.queryFeatures(query).then((results) => {
   *   results.features.forEach((feature) => {
   *     if (feature.attributes.Region === "Midwest") {
   *        view.goTo(feature.aggregateGeometries.aggregateExtent);
   *     }
   *   });
   * });
   */
  accessor aggregateGeometries: Record<string, GeometryUnion> | null | undefined;
  /**
   * Name-value pairs of fields and field values associated with the graphic.
   *
   * @example
   * let graphic = new Graphic();
   * graphic.attributes = {
   *   "name": "Spruce",
   *   "family": "Pinaceae",
   *   "count": 126
   * };
   */
  accessor attributes: any;
  /**
   * The geometry that defines the graphic's location.
   *
   * > [!WARNING]
   * >
   * > **Z-values** defined in a geographic or metric coordinate system are
   * > expressed in meters. However, in local scenes that use a
   * > projected coordinate system, vertical units are assumed to be the same as the
   * > horizontal units specified by the service.
   *
   * @example
   * // First create a point geometry
   * let point = {
   *   type: "point",  // autocasts as new Point()
   *   longitude: -71.2643,
   *   latitude: 42.0909
   * };
   *
   * // Create a symbol for drawing the point
   * let markerSymbol = {
   *   type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
   *   color: [226, 119, 40]
   * };
   *
   * // Create a graphic and add the geometry and symbol to it
   * let pointGraphic = new Graphic({
   *   geometry: point,
   *   symbol: markerSymbol
   * });
   */
  get geometry(): GeometryUnion | null | undefined;
  set geometry(value: ((ExtentProperties & { type: "extent" }) | (MultipointProperties & { type: "multipoint" }) | (PointProperties & { type: "point" }) | (PolygonProperties & { type: "polygon" }) | (PolylineProperties & { type: "polyline" }) | (MeshProperties & { type: "mesh" })) | null | undefined);
  /**
   * Indicates whether the graphic refers to an aggregate, or [cluster](https://developers.arcgis.com/javascript/latest/references/core/layers/support/FeatureReductionCluster/) graphic.
   * Aggregate graphics represent clusters of features. If a graphic is an aggregate, you can use its [Object ID](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#getObjectId) to
   * [Query.aggregateIds](https://developers.arcgis.com/javascript/latest/references/core/rest/support/Query/#aggregateIds) the features comprising the cluster.
   *
   * @default false
   * @since 4.18
   * @see [Query.aggregateIds](https://developers.arcgis.com/javascript/latest/references/core/rest/support/Query/#aggregateIds)
   */
  get isAggregate(): boolean;
  /** If applicable, references the layer in which the graphic is stored. */
  accessor layer: GraphicLayer | null | undefined;
  /**
   * Returns information about the origin of a graphic if applicable.
   * Origin details may be returned by methods such as [MapView.hitTest()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#hitTest) or by calling `queryFeatures()` on a layer or layer view.
   * Depending on the origin type, this information may include the source layer or other origin-related metadata.
   *
   * @since 4.29
   * @example
   * // get screen point from view's click event
   * view.on("click", (event) => {
   *   // Search for all features only on included layers at the clicked location
   *   view.hitTest(event, {include: vectorTileLayer}).then((response) => {
   *     // if graphics are returned from vector tile layer, do something with results
   *     if (response.results.length){
   *       response.results.forEach((result, i) => {
   *         const layerId = result.graphic?.origin?.layerId;
   *         const styleLayer = vectorTileLayer.getStyleLayer(layerId);
   *         // update layer's style
   *       });
   *     }
   *   })
   * });
   */
  accessor origin: GraphicOrigin | null | undefined;
  /**
   * The template for displaying content in a [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/)
   * when the graphic is selected. The [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) may be used to access
   * a graphic's [attributes](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#attributes) and display their values in the view's
   * default popup. See the documentation for [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) for details on
   * how to display attribute values in the popup.
   *
   * As of 4.8, to get the actual `popupTemplate` of the graphic, see the [getEffectivePopupTemplate()](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#getEffectivePopupTemplate)
   * method that either returns this value or the `popupTemplate` of the graphic's layer.
   *
   * @see [getEffectivePopupTemplate()](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#getEffectivePopupTemplate)
   * @example
   * // The following snippet shows how to set a popupTemplate
   * // on the returned results (features) from identify
   *
   *  idResult.feature.popupTemplate = {
   *  title: "{NAME}",
   *    content: [{
   *      // Pass in the fields to display
   *      type: "fields",
   *      fieldInfos: [{
   *        fieldName: "NAME",
   *        label: "Name"
   *      }, {
   *        fieldName: "REGION",
   *        label: "Region"
   *     }]
   *    }]
   * };
   */
  get popupTemplate(): PopupTemplate | null | undefined;
  set popupTemplate(value: PopupTemplateProperties | null | undefined);
  /**
   * The [Symbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol/) for the graphic. Choosing a symbol for a graphic depends on the [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) type (SceneView or MapView),
   * and the [geometry type](https://developers.arcgis.com/javascript/latest/references/core/geometry/Geometry/#type) of the graphic.
   *
   * Each graphic may have its own symbol specified when the parent layer is a [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/).
   * For a [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/) the symbol of each graphic should not be set by the developer since the
   * graphics' rendering properties are determined by the layer's [Renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/).
   *
   * To change a graphic's [Symbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/Symbol/) in the [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/) and in the [View.graphics](https://developers.arcgis.com/javascript/latest/references/core/views/View/#graphics) at runtime, one of the following can be done:
   * 1. Clone the symbol and change its properties.
   * 2. Assign a new symbol to the graphic.
   *
   * @example
   * view.on("click", function(event){
   *   let graphic = new Graphic({
   *     geometry: event.mapPoint,
   *     symbol: {
   *       type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
   *       color: "blue",
   *       size: 8,
   *       outline: { // autocasts as new SimpleLineSymbol()
   *         width: 0.5,
   *         color: "darkblue"
   *       }
   *     }
   *   });
   * });
   */
  get symbol(): SymbolUnion | null | undefined;
  set symbol(value: (((PictureFillSymbolProperties & { type: "picture-fill" }) | (PictureMarkerSymbolProperties & { type: "picture-marker" }) | (SimpleFillSymbolProperties & { type: "simple-fill" }) | (SimpleLineSymbolProperties & { type: "simple-line" }) | (SimpleMarkerSymbolProperties & { type: "simple-marker" }) | (TextSymbolProperties & { type: "text" }) | (CIMSymbolProperties & { type: "cim" })) | ((LabelSymbol3DProperties & { type: "label-3d" }) | (LineSymbol3DProperties & { type: "line-3d" }) | (MeshSymbol3DProperties & { type: "mesh-3d" }) | (PointSymbol3DProperties & { type: "point-3d" }) | (PolygonSymbol3DProperties & { type: "polygon-3d" })) | (WebStyleSymbolProperties & { type: "web-style" })) | null | undefined);
  /**
   * Indicates the visibility of the graphic.
   *
   * @default true
   */
  accessor visible: boolean;
  /**
   * Returns the value of the specified attribute.
   *
   * @param name - The name of the attribute.
   * @returns Returns the value of the attribute specified by `name`.
   */
  getAttribute<T = any>(name: string): T;
  /**
   * Returns the popup template applicable for the graphic.
   * It's either the value of [popupTemplate](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#popupTemplate) or
   * the `popupTemplate` from the graphic's layer.
   *
   * @param defaultPopupTemplateEnabled - = false - Whether support for default popup templates
   *   is enabled. When true, a default popup template may be created automatically if neither
   *   the graphic nor its layer have a popup template defined.
   * @returns Returns the popup template of the graphic.
   * @since 4.8
   */
  getEffectivePopupTemplate(defaultPopupTemplateEnabled?: boolean): PopupTemplate | null | undefined;
  /**
   * Returns the Global ID of the feature associated with the graphic, if it exists.
   *
   * @returns The GlobalID of the feature associated with the graphic.
   * @since 4.33
   */
  getGlobalId(): string | null | undefined;
  /**
   * Returns the Object ID of the feature associated with the graphic, if it exists.
   * The Object ID can be either a numeric value or a string identifier.
   *
   * @returns The ObjectID of the feature associated with the graphic.
   */
  getObjectId(): ObjectId | null | undefined;
  /**
   * Sets a new value to the specified attribute.
   *
   * @param name - The name of the attribute to set.
   * @param newValue - The new value to set on the named attribute.
   */
  setAttribute(name: string, newValue: any): void;
}
declare const GraphicSuperclass: typeof JSONSupport & typeof ClonableMixin