import Magnifier from "@arcgis/core/views/Magnifier.js";const Magnifier = await $arcgis.import("@arcgis/core/views/Magnifier.js");- Inheritance:
- Magnifier→
Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.19
The Magnifier allows end users to show a portion of the view as a magnified image. An instance of this class can be accessed through either MapView.magnifier or SceneView.magnifier.
As you can see in the screenshot above, the Magnifier utilizes a default overlay image of a magnifier
glass. The overlay image is set using the overlayUrl property. You can disable the overlay image by setting the overlayEnabled to false. The following
demonstrates using a Magnifier without an overlay image.
The Magnifier contains a default mask image, which is set using the maskUrl, and determines the visible area of the magnified image. Be default, the magnified area
is in the shape of a circle. The following demonstrates an example of a mask image set in the shape of a square. Note that the overlayEnabled was set
to false in this example as well to hide the overlay image, and only display the magnified area.
Example
view.when(() => { view.magnifier.visible = true;
const offset = view.magnifier.size / 2; view.magnifier.offset = { x: offset, y: offset };
//The magnifier will be displayed whenever the cursor hovers over the map. view.on("pointer-move", function (event) { view.magnifier.position = { x: event.x, y: event.y }; });});Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
declaredClass readonly inherited | ||
| | ||
| | ||
| | ||
| | ||
| | ||
| | ||
ScreenPoint | null | undefined | | |
| | ||
| |
factor
- Type
- number
Controls the amount of magnification to display. The larger the value, the more augmented the magnified image appears.
- Default value
- 1.5
maskUrl
The mask url points to an image that determines the visible area of the magnified image (alpha channel). A default built-in circle mask with a diameter equal to the size of the magnifier is used when the maskUrl is null.
offset
- Type
- ScreenPoint
The offset of the magnifier in pixels. The offset allows to adjust where the magnifier is drawn relative to its position.
Example
const offset = view.magnifier.size / 2;view.magnifier.offset = { x: offset, y: offset }; overlayEnabled
- Type
- boolean
Indicates whether the overlay image is enabled.
- Default value
- true
position
- Type
- ScreenPoint | null | undefined
The position of the magnifier in pixels. The magnifier will not be displayed if the position is null.