Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/autocasting/ below:

Autocasting | Overview | ArcGIS Maps SDK for JavaScript 4.33

Autocasting casts JavaScript objects as ArcGIS Maps SDK for JavaScript class types without the need for these classes to be explicitly imported by the app developer. This saves time and effort by reducing the number of modules that need to be specified in your code.

In the following code sample, five API classes are needed to create a SimpleRenderer for a FeatureLayer.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const [Color, SimpleLineSymbol, SimpleMarkerSymbol, SimpleRenderer, FeatureLayer] =
  await $arcgis.import([
    "@arcgis/core/Color.js",
    "@arcgis/core/symbols/SimpleLineSymbol.js",
    "@arcgis/core/symbols/SimpleMarkerSymbol.js",
    "@arcgis/core/renderers/SimpleRenderer.js",
    "@arcgis/core/layers/FeatureLayer.js",
  ]);

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
  renderer: new SimpleRenderer({
    symbol: new SimpleMarkerSymbol({
      style: "diamond",
      color: new Color([255, 128, 45]),
      outline: new SimpleLineSymbol({
        style: "dash-dot",
        color: new Color([0, 0, 0]),
      }),
    }),
  }),
});

With autocasting, you don't have to import renderer and symbol classes; the only module you need to import is @arcgis/core/layers/FeatureLayer.js.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
  renderer: {
    // autocasts as new SimpleRenderer()
    symbol: {
      // autocasts as new SimpleMarkerSymbol()
      type: "simple-marker",
      style: "diamond",
      color: [255, 128, 45], // autocasts as new Color()
      outline: {
        // autocasts as new SimpleLineSymbol()
        style: "dash-dot",
        color: [0, 0, 0], // autocasts as new Color()
      },
    },
  },
});

To know whether a class can be autocasted, look at the ArcGIS Maps SDK for JavaScript reference for each class. If a property can be autocasted, the following image will appear:

For example, the documentation for the property renderer of the FeatureLayer class has an autocast tag.

Notice the code using autocasting is simpler and is functionally identical to the above code snippet where all the modules are explicitly imported. The ArcGIS Maps SDK for JavaScript will take the values passed to the properties in the constructor and instantiate the typed objects internally.

Keep in mind there is no need to specify the type on properties where the module type is known, or fixed. For example, look at the outline property in the SimpleMarkerSymbol class from the snippet above. It doesn't have a type property because the only Symbol subclass with an outline property is SimpleLineSymbol.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
const diamondSymbol = {
  type: "simple-marker",
  outline: {
    type: "simple-line", // Not needed, as type `simple-line` is implied
    style: "dash-dot",
    color: [255, 128, 45],
  },
};

In cases where the type is more generic, such as FeatureLayer.renderer, then type must always be specified for autocasting to work properly.

Autocasting also works in TypeScript applications. It works in constructors, parameters and properties. Support for property setters was added at 4.32. In the following example, the types are correctly narrowed when the renderer is set after the FeatureLayer is created:

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let citiesLayer = new FeatureLayer({
  url: "http://url.to.service",
});

citiesLayer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    size: 6,
    color: "black",
    outline: {
      width: 0.5,
      color: "white",
    },
  },
};

When defining autocasted objects without a context from which the types are derived, certain objects and properties like type that are string literal types can use a const assertion to pass type checks. In the example below, the diamondSymbol object will be autocast as a SimpleMarkerSymbol:

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
const diamondSymbol = {
  type: "simple-marker",
  outline: {
    type: "simple-line",
    style: "dash-dot",
    color: [255, 128, 45],
  },
} as const; // use the const assertion

let pointGraphic = new Graphic({
  geometry: point,
  symbol: diamondSymbol,
});

To learn more about const assertions, see the TypeScript 3.4 release notes.

All code samples document whether a class or property is being autocasted.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4