import ControlPointsGeoreference from "@arcgis/core/layers/support/ControlPointsGeoreference.js";const ControlPointsGeoreference = await $arcgis.import("@arcgis/core/layers/support/ControlPointsGeoreference.js");- Inheritance:
- ControlPointsGeoreference→
Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.25
ControlPointsGeoreference is used to set the geographic location of the ImageElement or VideoElement referenced in the MediaLayer using the controlPoints, width, and height parameters. The element is positioned, scaled, and rotated with two controlPoints. Additionally, it will be skewed with three controlPoints. With four controlPoints, a perspective transformation is applied to the element.
// the spatial reference for the MediaLayer, North American Datum 1927const spatialReference = new SpatialReference({ wkid: 4267 });
// create an array of four control points composed of a sourcePoint, a point// on the image element in pixels, and a mapPoint which is the location of the// sourcePoint in map spaceconst swCorner = { sourcePoint: { x: 80, y: 1732 }, mapPoint: new Point({ x: -107.875, y: 37.875, spatialReference })};
const nwCorner = { sourcePoint: { x: 75, y: 102 }, mapPoint: new Point({ x: -107.875, y: 38, spatialReference })};
const neCorner = { sourcePoint: { x: 1353, y: 99 }, mapPoint: new Point({ x: -107.75, y: 38, spatialReference })};
const seCorner = { sourcePoint: { x: 1361, y: 1721 }, mapPoint: new Point({ x: -107.75, y: 37.875, spatialReference })};
const controlPoints = [swCorner, nwCorner, neCorner, seCorner];
// georeference for the imageElement using the control points,// image width, and image heightconst georeference = new ControlPointsGeoreference({ controlPoints, width: 1991, height: 2500 });
const imageElement = new ImageElement({ image: "https://jsapi.maps.arcgis.com/sharing/rest/content/items/1a3df04e7d734535a3a6a09dfec5a6b2/data", georeference});
// create a MediaLayer using the georeferenced ImageElementconst mediaLayer = new MediaLayer({ source: [imageElement], title: "Geologic Map of the Telluride Quadrangle, Southwestern Colorado", copyright: "Wilbur S Burbank and Robert G. Luedke, 1966", opacity: 0.5, spatialReference});Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
| | ||
declaredClass readonly inherited | ||
| | ||
type readonly | "control-points" | |
| |
controlPoints
- Type
- ControlPoints | null | undefined
An array of two, three, or four controlPoints positions the media element. The element is positioned, scaled, and rotated with two controlPoints. Additionally, it will be skewed with three controlPoints. With four controlPoints, a perspective transformation is applied to the element.
Example
const swCorner = { sourcePoint: { x: 80, y: 1732 }, mapPoint: new Point({ x: -107.875, y: 37.875, spatialReference })};
const neCorner = { sourcePoint: { x: 1353, y: 99 }, mapPoint: new Point({ x: -107.75, y: 38, spatialReference })};
const controlPoints = [swCorner, neCorner]; height
- Type
- number
Defines the size of the element displayed, typically the element's height in pixels. This property is used alongside controlPoints and width to position the element.
- Default value
- 0
width
- Type
- number
Defines the size of the element displayed, typically the element's width in pixels. This property is used alongside controlPoints and height to position the element.
- Default value
- 0
Methods
fromJSON
- Signature
-
fromJSON (json: any): any
Creates a new instance of this class and initializes it with values from a JSON object
generated from an ArcGIS product. The object passed into the input json
parameter often comes from a response to a query operation in the REST API or a
toJSON()
method from another ArcGIS product. See the Using fromJSON()
topic in the Guide for details and examples of when and how to use this function.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| json | A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects. | |
- Returns
- any
Returns a new instance of this class.
clone
- Signature
-
clone (): this
Creates a deep clone of this object. Any properties that store values by reference will be assigned copies of the referenced values on the cloned instance.
- Returns
- this
A deep clone of the class instance that invoked this method.
toJSON
- Signature
-
toJSON (): any
Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.
- Returns
- any
The ArcGIS portal JSON representation of an instance of this class.
toMap
- Signature
-
toMap (sourcePoint: ScreenPoint | null | undefined): Point | null | undefined
Converts the given ScreenPoint to a mapPoint. The ScreenPoint represents a point in terms of pixels relative to the top-left corner of the element.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| sourcePoint | ScreenPoint | null | undefined | The location on the element. | |
Example
const mapPoint = controlPointGeoreference.toMap({x: 100, y: 250}) toSource
- Signature
-
toSource (point: Point | null | undefined): ScreenPoint | null | undefined
Converts the given mapPoint to a ScreenPoint. The ScreenPoint represents a point in terms of pixels relative to the top-left corner of the element.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| point | A point geometry.
In the case where the point is not in the same spatial reference as the one in the mapPoint of the first control point,
it will be reprojected. The projectOperator would need to be loaded to perform the reprojection, otherwise | |
- Returns
- ScreenPoint | null | undefined
The location on the element corresponding to the given mapPoint.
Example
// North_American_Datum_1927const spatialReference = new SpatialReference({ wkid: 4267 });const sourcePoint = controlPointGeoreference.toSource(new Point({ x: -107.875, y: 37.875, spatialReference }))