import GridControlsViewModel from "@arcgis/core/widgets/support/GridControls/GridControlsViewModel.js";const GridControlsViewModel = await $arcgis.import("@arcgis/core/widgets/support/GridControls/GridControlsViewModel.js");- Inheritance:
- GridControlsViewModel→
Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.31
Provides the logic for the GridControls.
GridControls is integrated into the Editor and Sketch widgets via the SnappingControls widget. Display of the GridControls widget in those contexts can be controlled through each widget's respective GridControls.visibleElements property.
- See also
GridControls - Deprecated since 4.33. Use the Grid Controls component instead.
Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
displayEnabled readonly | | |
| | ||
effectiveSpacingAfterDynamicScaling readonly | | |
| | ||
gridControlsEnabled readonly | | |
gridOutOfScale readonly | | |
| | ||
| | ||
numericSpacingInputShouldBeVisible readonly | | |
| | ||
| | ||
| | ||
| | ||
| | ||
| | ||
| | ||
| |
displayEnabled
- Type
- boolean
Returns true if the grid is enabled for display.
Use trySetDisplayEnabled() to enable or disable grid display.
dynamicScaling
- Type
- boolean
Returns true if the grid is set to scale dynamically. When dynamic scaling is enabled,
grid cells are added or removed to ensure that grid cells are a reasonable size on screen as the user zooms.
The way additional grid lines are shown is controlled by the majorLineInterval property.
effectiveSpacingAfterDynamicScaling
Returns the effective spacing of grid lines after applying the dynamicScaling setting at the current view scale.
gridColor
Sets the color used for grid display. When major/minor lines are shown majorLineInterval is between 2 and 15. The minor line will be shown at the provided color with 50% opacity.
gridControlsEnabled
- Type
- boolean
Returns true if the grid is in a valid state for manually setting grid properties or starting an interactive placement.
gridOutOfScale
- Type
- boolean
True if the grid is currently not displayed (and therefore also not a valid snap target), because dynamicScaling is off and the grid cells are too small to render at the current scale.
interactivePlacementState
- Type
- GridPlacementState | null | undefined
Sets the interactive placement state, either starting or ending a draw operation that implicitly adjusts the grid. Interactive placement allows the user to define the center of the grid, then the scale and rotation of the grid by drawing a second point. Setting this to "place" allows the user to move the grid center only. Setting this to "rotate" keeps the scale and center of the grid constant while rotating the grid by defining a second point.
majorLineInterval
- Type
- number
Controls the number of grid lines shown at 50% opacity between opaque grid lines when using dynamicScaling.
- Default value
- 10
numericSpacingInputShouldBeVisible
- Type
- boolean
True if the spacing input should be shown for the current view.
Common spatial references, like Web Mercator and WGS84, will show a significant mismatch between the spacing defined for the grid and the actual length of grid cells. This mismatch varies with position on the map and with direction (the mismatch is different depending on line angle).
Because the spacing input is inappropriate and misleading in common web mapping use cases, it should be hidden from the user to avoid conveying a false sense of precision.
For specialized planar spatial references, it is more likely that the user is an experience GIS professional with an understanding of projections and the consequent distortions. To enable these users to complete their work, users of maps with these spatial references can be given direct access to specify grid length.
placementDisabled
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.33
If true, interactive placement tools should be disabled.
- Default value
- false
rotateWithMap
- Type
- boolean
Determines the behavior of the grid when the map's viewpoint is rotated. When true, rotating the map also rotates the grid on screen. When false, rotating the viewpoint does not rotate the grid.
Note that rotation is applied independently and can be configured regardless of how this setting is configured.
- Default value
- true
snappingEnabled
- Type
- boolean
Controls snapping behavior if snappingOptions has been defined. If snappingOptions have been defined, disabling or enabling grid snapping will also disable or enable grid display.
- Default value
- false
snappingOptions
- Type
- SnappingOptions | null | undefined
This is the snapping options object that will be configured by the 'enable snapping' property.
unit
- Type
- LengthUnit | undefined
Unit of measure (foot, meter, etc) used when defining the spacing grid cell. Note that units are defined relatively to the map's spatial reference length unit, which will not correspond to geographic distance unless using a special-purpose basemap within a supported target area.
When using Web Mercator, the projection defines the length of a meter in projection system units; this length is equal to a geographic meter only at the equator. On screen, the size of the grid cells is constant from the equator to the poles, but the real-world size of the grid cell is much larger further from the equator.
The length of the grid cells can usefully correspond to a geographic length when the Grid is used with an appropriate spatial reference (for example a local system or a State Plane system) within the reference's area of interst.
Methods
| Method | Signature | Class |
|---|---|---|
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
on inherited | on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle | |
trySetDisplayEnabled(visible: boolean): void | |
emit
- Signature
-
emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
- Type parameters
- <Type extends EventNames<this>>
Emits an event on the instance. This method should only be used when creating subclasses of this class.
hasEventListener
- Signature
-
hasEventListener <Type extends EventNames<this>>(type: Type): boolean
- Type parameters
- <Type extends EventNames<this>>
Indicates whether there is an event listener on the instance that matches the provided event name.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | The name of the event. | |
- Returns
- boolean
Returns true if the class supports the input event.
on
- Signature
-
on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle
- Type parameters
- <Type extends EventNames<this>>
Registers an event handler on the instance. Call this method to hook an event with a listener.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | An event or an array of events to listen for. | |
| listener | EventedCallback<this["@eventTypes"][Type]> | The function to call when the event fires. | |
- Returns
- ResourceHandle
Returns an event handler with a
remove()method that should be called to stop listening for the event(s).Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint);});