class

GraphicsLayer

extends LayerBase

implements IFeatureLayer, IQueryableLayer

Client-side layer for programmatically adding, removing, and querying features. Does not fetch from any remote service. Ideal for dynamic data, user-drawn geometry, and animation.

Constructor

new GraphicsLayer(options?: GraphicsLayerOptions)
Parameter Type Description
options GraphicsLayerOptions optional Inherits from LayerBaseOptions

GraphicsLayerOptions

Field Type Description
id string optional Layer ID
visible boolean optional Initial visibility Default: true
opacity number optional Layer opacity (0-1) Default: 1
zIndex number optional Display order
interactive boolean optional Enable hit testing Default: true

Properties

Name Type Access Description
type 'graphics' readonly Layer type discriminant
renderer IRenderer | undefined read/write Feature renderer for symbology. Set to apply custom symbols to features.
graphics readonly Feature[] readonly All current features (readonly view)
count number readonly Number of features

Methods

add()

add(feature: Feature): void

Add a feature. Replaces existing feature with same id.

Returns void

addMany()

addMany(features: Feature[]): void

Add multiple features at once.

Returns void

replaceAll()

replaceAll(features: Feature[]): void

Replace all features atomically with a single refresh. Much more efficient than clear() + addMany() for animation loops.

Returns void

remove()

remove(id: string | number): boolean

Remove a feature by id. Returns true if found and removed.

Returns boolean

clear()

clear(): void

Remove all features.

Returns void

getFeatures()

getFeatures(): readonly Feature[]

Get all features (IFeatureLayer).

Returns readonly Feature[]

queryFeatures()

queryFeatures(params: QueryParams): Promise<Feature[]>

Query with bbox, where filter, outFields, and maxResults.

Returns Promise<Feature[]>

queryExtent()

queryExtent(params?: QueryParams): Promise<Extent>

Get bounding extent.

Returns Promise<Extent>

Example

const graphics = new GraphicsLayer({ id: 'user-markers' });
graphics.renderer = new SimpleRenderer({
  type: 'simple-marker',
  color: [255, 0, 0, 255],
  size: 10,
});
view.map.add(graphics);

// Add a point
graphics.add({
  id: 1,
  geometry: { type: 'Point', coordinates: [28.97, 41.01] },
  attributes: { name: 'Istanbul' },
});

// Animation pattern — replaceAll is O(1) refresh
graphics.replaceAll(updatedFeatures);