Layers and Data (PART 1)

Layers are collections of data that can be used in a Map. Layer data can be created front-end, published by ArcGIS Online and ArcGIS Enterprise, or hosted by external servers.

Elements of a collection

Feature (s)

: An element is a record of a geographical location or entity. Each element contains spatial coordinates defined for a geometric type (point, polyline, or polygon) and property fields that store additional information.

Layers are usually used to manage and display large sets of elements. Element sets are divided into structured and unstructured 1. If you want to display a collection of elements, the general approach is:

  • If the data is structured, use FeatureLayer to display the data

  • If it’s unstructured, use GraphicsLayer to display the data

Map, as a data container, stores layers of different types. Layers are composed of elements, and each element must contain attributes, Geometry, and symbol attributes to be displayed normally. PopupTemplate is an optional attribute, which defines the display content of the pop-up window of elements.

Common Layer Types

The ArcGIS API for JavaScript has many layer classes that can be used to access and display layer data. All Layer classes inherit from Layer. Which layer class to use depends on the format of the data and where it is stored. Each layer class also has a different method.

Common layer types are described as follows:

  • FeatureLayer, geographic data stored in ArcGIS Enterprise, is used to display, query, filter, and edit a large number of geographic elements.
  • GraphicsLayer, a temporary in-memory store of geographic data used to display a small number of geographic elements as graphics or text on a map.
  • CSVLayer/KMLLayer/GeoJSONLayer, stored in the geographic data can be accessed through the network external files, it is mainly used for the external file storage of geographic data displayed as a layer.
  • TileLayer/VectorTileLayer, data stored as slicing scheme, in order to realize the fast rendering, is mainly used for display in the context of geographic and other reproduction slice data set.
  • MapImageLayer, stored in ArcGIS Enterprise, dynamically generates images to display corresponding geographic data. Mainly used to show the layers dynamically rendered by ArcGIS Server service.
  • ImageryLayer, geo-related images stored in ArcGIS Enterprise. Mainly used to display satellite or other image data.

FeatureLayer introduction

FeatureLayer’s data sources can be in-memory data loaded by an application, or data requested from a REST API service hosted on ArcGIS Enterprise. Publishing service data in ArcGIS Enterprise is the preferred approach, especially when accessing and displaying large amounts of geographic data. Layers are highly optimized on both the client and server for quick display and support for a number of other features.

The server builds the layer

FeatureLayer supports generating layers from a collection of elements returned from the REST API service. This is the most efficient way to access and display large data sets.

var layer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});

map.layers.add(layer);
Copy the code

The client builds the layer

Normally, layer data is loaded from a REST API service hosted on ArcGIS Enterprise, but you can also create a FeatureLayer directly from an in-memory collection of elements.

Sample JSON data:

{
  "places": [{"id": 1."address": "200 N Spring St, Los Angeles, CA 90012"."longitude": 118.24354."latitude": 34.05389
    },
    {
      "id": 2."address": "419 N Fairfax Ave, Los Angeles, CA 90036"."longitude": 118.31966."latitude": 34.13375}}]Copy the code

To create a FeatureLayer from the sample JSON data, follow these steps:

  1. Convert each entry of the Places array into a Graphic object with attributes and geometry. Graphic objects mainly contain attributes and Geometry attributes, which are responsible for setting the graphics and attributes of elements, respectively.

    const graphics = places.map(function (place) {
  return new Graphic({
    attributes: {
      ObjectId: place.id,
      address: place.address
    },
    geometry: {
      longitude: place.longitude,
      latitude: place.latitude
    }
  });
});
Copy the code

  2. Create a FeatureLayer object and specify the objectIdField, Fields, Renderer, and Source attributes. The objectIdField specifies a unique location name for the element. The field attribute specifies the id field. The field attribute is an array of objects that specifies the fields and value types of the element. The source property specifies that a collection of graphic objects for FeatureLayer be created.

    const featureLayer = new FeatureLayer({
  source: graphics,
  renderer: {
    type: "simple".// autocasts as new SimpleRenderer()
    symbol: {                          // autocasts as new SimpleMarkerSymbol()
      type: "simple-marker".color: "#102A44".outline: {                       // autocasts as new SimpleLineSymbol()
        color: "#598DD8".width: 2}}},objectIdField: "ObjectID".// This must be defined when creating a layer from `Graphic` objects
  fields: [{name: "ObjectID".alias: "ObjectID".type: "oid"
    },
    {
      name: "address".alias: "address".type: "string"}}]); map.layers.add(featureLayer);Copy the code

Introduce GraphicsLayer

Graphics is usually used to temporarily add text to a map, and Graphics with different types. The easiest way to create the GraphicsLayer is to create a Graphic object as an array and pass that array to the graphics property of a new GraphicsLayer object.

Graphic can be understood as a single element, so it requires attributes, Geometry, and symbol to display properly.

const pointGraphic = new Graphic({
  attributes: {
    name: "LA City Hall".address: "200 N Spring St, Los Angeles, CA 90012"
  },
  geometry: {
    type: "point".// autocasts as new Point()
    longitude: -118.24354.latitude: 34.05389
  },
  symbol: {
    type: "simple-marker".// autocasts as new SimpleMarkerSymbol()
    color: [ 226.119.40].outline: {                         // autocasts as SimpleLineSymbol()
      color: [ 255.255.255].width: 2}}});const graphicsLayer = new GraphicsLayer({
  graphics: [ pointGraphic ]
});

map.layers.add(graphicsLayer);
Copy the code
  1. It is structured if each element has the same geometric type and the same attribute name. Otherwise, it is unstructured. ↩