@arcgis/map-components
Version:
ArcGIS Map Components
211 lines (210 loc) • 10.1 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type MapView from "@arcgis/core/views/MapView.js";
import type AreaMeasurementAnalysis from "@arcgis/core/analysis/AreaMeasurementAnalysis.js";
import type SnappingOptions from "@arcgis/core/views/interactive/snapping/SnappingOptions.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement } from "../types.js";
import type { AreaMeasurement2DState } from "./types.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
import type { SystemOrAreaUnit } from "@arcgis/core/core/units.js";
/**
* The Area Measurement 2D component can be added to an [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/)
* component to calculate and display the area and perimeter of a polygon.
*
* How areas and perimeters are computed depends on the map's spatial reference.
*
* In **geographic coordinate systems** (GCS), and in **Web Mercator**, areas and perimeters are computed geodetically, taking into consideration the curvature of the planet.
*
* In **projected coordinate systems** (PCS), apart from Web Mercator, areas and perimeters are computed in a Euclidean manner (in their respective PCS).
*
* @since 4.28
*/
export abstract class ArcgisAreaMeasurement2d extends LitElement {
/**
* The [AreaMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/references/core/analysis/AreaMeasurementAnalysis/)
* created or modified by the component.
*
* When connecting the Area Measurement 2D component to the [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/)
* component, it automatically creates an empty analysis and adds it to the Map's
* [arcgis-map.analyses](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#analyses) collection.
* You can then wait for the [AreaMeasurementAnalysisView2D](https://developers.arcgis.com/javascript/latest/references/core/views/2d/analysis/AreaMeasurementAnalysisView2D/)
* to be created before accessing the analysis results.
*
* ```js
* // Get the Map component and the Area Measurement 2D component, and wait until both are ready.
* const viewElement = document.querySelector("arcgis-map");
* await viewElement.viewOnReady();
* const areaMeasurement2dElement = document.querySelector("arcgis-area-measurement-2d");
* await areaMeasurement2dElement.componentOnReady();
*
* // Get the AreaMeasurementAnalysis created by the Area Measurement 2D component.
* const analysis = areaMeasurement2dElement.analysis;
*
* // Get the AreaMeasurementAnalysisView2D and watch for results.
* const analysisView = await viewElement.whenAnalysisView(analysis);
* const handle = reactiveUtils.watch(
* () => analysisView?.result,
* () => {
* console.log("Analysis results:", analysisView.result);
* },
* );
* ```
* Whenever the component is destroyed, the analysis is automatically removed from the collection.
*
* Alternatively, a programmatically created [AreaMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/references/core/analysis/AreaMeasurementAnalysis/)
* can be provided to the component.
* Then, the application itself needs to add it to and later remove it from the analyses collection of the Map component.
*
* ```js
* // Create the AreaMeasurementAnalysis.
* const areaMeasurementAnalysis = new AreaMeasurementAnalysis({
* geometry: new Polygon({
* rings: [
* [
* [-80.208889, 25.775278], // Maimi, Florida
* [-64.782, 32.293], // Hamilton, Bermuda
* [-66.063889, 18.406389], // San Juan, Puerto Rico
* [-80.208889, 25.775278], // Maimi, Florida
* ],
* ],
* }),
* });
*
* // Get the Map component and the Area Measurement 2D component, and wait until both are ready.
* const viewElement = document.querySelector("arcgis-map");
* await viewElement.viewOnReady();
* const areaMeasurement2dElement = document.querySelector("arcgis-area-measurement-2d");
* await areaMeasurement2dElement.componentOnReady();
*
* // Add the analysis to the analyses collection of the Map component.
* viewElement.analyses.add(areaMeasurementAnalysis);
*
* // Connect the analysis to the measurement component:
* areaMeasurement2dElement.analysis = areaMeasurementAnalysis;
* ```
*/
accessor analysis: AreaMeasurementAnalysis;
/**
* If true, the component will not be destroyed automatically when it is
* disconnected from the document. This is useful when you want to move the
* component to a different place on the page, or temporarily hide it. If this
* is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-2d/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* If true, the button that starts a new measurement will be hidden.
*
* @default false
* @since 5.0
*/
accessor hideStartButton: boolean;
/**
* If true, the unit selection dropdown will be hidden.
*
* @default false
* @since 5.0
*/
accessor hideUnitSelect: boolean;
/**
* Indicates whether the component's visualization is hidden in the view.
*
* @default false
* @since 5.0
*/
accessor hideVisualization: boolean;
/**
* Icon which represents the component.
* Typically used when the component is controlled by another component (e.g. by the Expand component).
*
* @default "measure-area"
* @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: Icon["icon"] | undefined;
/** The component's default label. */
accessor label: string | undefined;
/** @internal */
protected messages: {
area: string;
componentLabel: string;
hint: string;
mode: string;
modes: {
auto: string;
planar: string;
geodesic: string;
};
newMeasurement: string;
perimeter: string;
unit: string;
unsupported: string;
} & T9nMeta<{
area: string;
componentLabel: string;
hint: string;
mode: string;
modes: {
auto: string;
planar: string;
geodesic: string;
};
newMeasurement: string;
perimeter: string;
unit: string;
unsupported: string;
}>;
/**
* By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
*
* @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
*/
accessor referenceElement: ArcgisReferenceElement | string | undefined;
/**
* The [SnappingOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/snapping/SnappingOptions/) for measuring.
*
* @since 4.28
*/
accessor snappingOptions: SnappingOptions;
/**
* The component's state. The values mean the following:
*
* * `disabled` - not ready yet
* * `ready` - ready for measuring
* * `measuring` - currently measuring
* * `measured` - measuring has finished
*/
get state(): AreaMeasurement2DState;
/**
* Unit system (imperial, metric) or specific unit used for displaying the distance values. Possible values are listed in
* [unitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-2d/#unitOptions).
*/
accessor unit: SystemOrAreaUnit;
/**
* List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
* By default, the following units are included: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.
* Possible [unit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-2d/#unit) values can only be a subset of this list.
*/
accessor unitOptions: Array<SystemOrAreaUnit>;
/**
* The view associated with the component.
* > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-area-measurement-2d component will be associated with a map or scene component rather than using the `view` property.
*/
accessor view: MapView | undefined;
/** Clears the current measurement. */
clear(): Promise<void>;
/** Permanently destroy the component. */
destroy(): Promise<void>;
/** Starts a new measurement. */
start(): Promise<void>;
/** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "analysis" | "state"; }>;
/** Emitted when the component associated with a map or scene view is ready to be interacted with. */
readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
arcgisPropertyChange: ArcgisAreaMeasurement2d["arcgisPropertyChange"]["detail"];
arcgisReady: ArcgisAreaMeasurement2d["arcgisReady"]["detail"];
};
}