@arcgis/map-components
Version:
ArcGIS Map Components
253 lines (252 loc) • 10.7 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type SceneView from "@arcgis/core/views/SceneView.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
import type { WeatherState } from "./types.js";
/**
* The Weather component allows easy selection and configuration of weather effects in a
* [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) component.
* The available weather types are:
* [sunny](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SunnyWeather/),
* [cloudy](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/CloudyWeather/),
* [rainy](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/RainyWeather/),
* [snowy](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SnowyWeather/), and
* [foggy](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/FoggyWeather/).
*
* To set the weather programmatically, apply the desired weather type to the
* [arcgis-scene.environment](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#environment) property of the Scene component.
*
* ```js
* // Access the Scene component.
* const viewElement = document.querySelector("arcgis-scene");
* await viewElement.viewOnReady();
* // Specify the weather settings.
* viewElement.environment.weather = {
* type: "rainy", // autocasts as new RainyWeather({ cloudCover: 0.7, precipitation: 0.3 })
* cloudCover: 0.7,
* precipitation: 0.3
* };
* ```
*
* To determine if the weather visualization is available, check the boolean value of `viewElement.environment.weatherAvailable`. The weather is only available:
* * in `global` [arcgis-scene.viewingMode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#viewingMode),
* * when `atmosphereEnabled` property on [arcgis-scene.environment](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#environment) is `true`,
* * at lower altitudes, near the ground.
*
* **Known limitations**
*
* Weather is only supported in a 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) component.
*
* **See also**
*
* - [SunnyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SunnyWeather/)
* - [CloudyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/CloudyWeather/)
* - [RainyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/RainyWeather/)
* - [SnowyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/SnowyWeather/)
* - [FoggyWeather](https://developers.arcgis.com/javascript/latest/references/core/views/3d/environment/FoggyWeather/)
* - [Sample - Weather component](https://developers.arcgis.com/javascript/latest/sample-code/weather/)
*
* @since 4.28
*/
export abstract class ArcgisWeather extends LitElement {
/**
* 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-weather/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* Indicates the heading level to use for the title of the component. By default, this message is rendered as a level 4
* heading (e.g. `<h4>Time range</h4>`). Depending on the component's placement in your app, you may need to adjust
* this heading for proper semantics. This is important for meeting accessibility standards.
*
* @default 4
* @see [Heading Elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
*/
accessor headingLevel: HeadingLevel;
/**
* Whether to hide the component's header.
*
* @default false
*/
accessor hideHeader: boolean;
/**
* Icon which represents the component.
* Typically used when the component is controlled by another component (e.g. by the Expand component).
*
* @default "partly-cloudy"
* @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: string;
/**
* The component's default label.
*
* @default "Weather"
*/
accessor label: string | undefined;
/**
* Replace localized message strings with your own strings.
*
* _**Note**: Individual message keys may change between releases._
*/
accessor messageOverrides: {
componentLabel?: string | undefined;
componentLabelAccessible?: string | undefined;
weatherType?: string | undefined;
error?: {
unsupported?: string | undefined;
localScene?: string | undefined;
notVisible?: string | undefined;
noAtmosphere?: string | undefined;
} | undefined;
sunny?: {
label?: string | undefined;
cloudCover?: string | undefined;
cloudCoverAria?: string | undefined;
} | undefined;
cloudy?: {
label?: string | undefined;
cloudCover?: string | undefined;
cloudCoverAria?: string | undefined;
} | undefined;
rainy?: {
label?: string | undefined;
cloudCover?: string | undefined;
cloudCoverAria?: string | undefined;
precipitation?: string | undefined;
precipitationAria?: string | undefined;
} | undefined;
snowy?: {
label?: string | undefined;
cloudCover?: string | undefined;
cloudCoverAria?: string | undefined;
precipitation?: string | undefined;
precipitationAria?: string | undefined;
snowCover?: string | undefined;
snowCoverAria?: string | undefined;
snowCoverTooltip?: string | undefined;
} | undefined;
foggy?: {
label?: string | undefined;
fogStrength?: string | undefined;
fogStrengthAria?: string | undefined;
} | undefined;
warningTitle?: string | undefined;
};
/** @internal */
protected messages: Partial<{
componentLabel: string;
componentLabelAccessible: string;
weatherType: string;
error: {
unsupported: string;
localScene: string;
notVisible: string;
noAtmosphere: string;
};
sunny: {
label: string;
cloudCover: string;
cloudCoverAria: string;
};
cloudy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
};
rainy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
precipitation: string;
precipitationAria: string;
};
snowy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
precipitation: string;
precipitationAria: string;
snowCover: string;
snowCoverAria: string;
snowCoverTooltip: string;
};
foggy: {
label: string;
fogStrength: string;
fogStrengthAria: string;
};
warningTitle: string;
}> & T9nMeta<{
componentLabel: string;
componentLabelAccessible: string;
weatherType: string;
error: {
unsupported: string;
localScene: string;
notVisible: string;
noAtmosphere: string;
};
sunny: {
label: string;
cloudCover: string;
cloudCoverAria: string;
};
cloudy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
};
rainy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
precipitation: string;
precipitationAria: string;
};
snowy: {
label: string;
cloudCover: string;
cloudCoverAria: string;
precipitation: string;
precipitationAria: string;
snowCover: string;
snowCoverAria: string;
snowCoverTooltip: string;
};
foggy: {
label: string;
fogStrength: string;
fogStrengthAria: string;
};
warningTitle: 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 current state of the component. */
get state(): WeatherState;
/**
* 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-weather component will be associated with a map or scene component rather than using the `view` property.
*/
accessor view: SceneView | undefined;
/** Permanently destroy the component. */
destroy(): 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: "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: ArcgisWeather["arcgisPropertyChange"]["detail"];
arcgisReady: ArcgisWeather["arcgisReady"]["detail"];
};
}