[JavaScript知识库]ArcGIS API for JavaScript 之各式各样的layer

众所周知，arcgis jsapi中地图服务图层有非常多种。苦其久矣，今天就来扒一扒这个layers。前面分了几个种类整理了一下，最后总结了一下易混淆的几种类型，可直接跳转到目录。

一、种类

1.1base 基础类

1. BaseDynamicLayer 动态地图图层
   Inheritance: BaseDynamicLayer>Layer>Accessor since 4.4
   Subclasses: DynamicLayer、
   可以扩展此类以创建动态地图图层。动态图层显示基于请求在服务器上动态生成的图像，包括图像的范围和大小。导出的图像覆盖整个视图范围。视图上的每次交互（例如平移、缩放）都会导致在服务器上导出新图像。每个导出都是唯一的，因此无法在浏览器中缓存。
   您可以出于以下原因之一创建自定义动态层：

• ArcGIS API for JavaScript 未明确支持图像的来源 复写类中的getImageUrl方法
• 图像在视图中显示之前需要进行预处理 复写类中的fetchImage方法

2. BaseElevationLayer 高程
   Inheritance: BaseElevationLayer>Layer>Accessor since 4.4
   Subclasses: ElevationLayer、
   该类旨在扩展以创建自定义高程图层。
   如果新层需要获取和准备资源，您可以在加载层之前异步初始化属性。这在load() 方法中处理。当图层即将显示时，由您或视图调用此方法一次。在方法的主体中，您可以调用addResolvingPromise()来添加一个必须在层被认为已加载之前解决的promise。

3. BaseTileLayer 切片
   Inheritance: BaseTileLayer>Layer>Accessor since 4.4
   Subclasses: BingMapsLayer、
   切片图层由图像（例如卫星图像）组成，这些图像由按列和行镶嵌在一起的方形切片组成，使图层看起来像是一张连续的图像。这些图层具有多个细节级别 (LOD)，允许用户放大到地图的任何区域并加载额外的切片，以在更大的地图比例下以更高分辨率描绘特征。
   切片图层通常为其他图层（例如 FeatureLayer）提供地理上下文，并且往往比其他图层（例如 MapImageLayer 和 ImageryLayer）执行得更好，这些图层请求并显示每个视图的单个图像。
   图层负责生成切片 URL 并从服务器获取层视图提供的层、行和列的切片。 LayerView 显示获取的图块。
   您可以出于以下原因之一创建自定义切片图层：

• ArcGIS API for JavaScript 未明确支持图像的来源 复写类中的getTileUrl()方法
• 图像在视图中显示之前需要进行预处理 复写类中的fetchTile方法

// override fetchTile() method to process the data returned
        // from the server.
        fetchTile: function (level, row, col, options) {
          // call getTileUrl method to construct the Url for the image
          // for given level, row and column
          let url = this.getTileUrl(level, row, col);

          // request for the tile based on the url returned from getTileUrl() method.
          // the signal option ensures that obsolete requests are aborted.
          return esriRequest(url, {
            responseType: "image",
            signal: options && options.signal
          })
          .then(function (response) {
            // when esriRequest resolves successfully,
            // process the image that is returned
            let image = response.data;
            let width = this.tileInfo.size[0];
            let height = this.tileInfo.size[0];

            // create a canvas with a filled rectangle
            let canvas = document.createElement("canvas");
            let context = canvas.getContext("2d");
            canvas.width = width;
            canvas.height = height;

            // Apply the color provided the the layer to the fill rectangle
            if (this.tint) {
              context.fillStyle = this.tint.toCss();
              context.fillRect(0, 0, width, height);
              // apply multiply blend mode to canvas' fill color and the tile
              // returned from the server to darken the tile
              context.globalCompositeOperation = "multiply";
            }
            context.drawImage(image, 0, 0, width, height);
            return canvas;
          }.bind(this));
        }

4. BuildingSceneLayer 建筑模型
   Inheritance: BuildingSceneLayer>Layer>Accessor since 4.10
   Subclasses:
   BuildingSceneLayer 设计用于在 SceneView 中可视化具有详细内部结构的建筑物。这些建筑模型通常是从??建筑信息模型 (BIM) 项目中导出的。 BuildingSceneLayer 中的数据可以表示墙壁、照明设备、机械系统、家具等。
   BuildingSceneLayers 可视化建筑物的复杂数字模型，并允许您与建筑物的所有组件进行交互。由于高度复杂，BuildingSceneLayer 中的数据组织在 BuildingGroupSublayers 中，其中包含 BuildingComponentSublayers。

5. ElevationLayer 高程图层
   Inheritance: ElevationLayer>Layer>Accessor since 4.0
   Subclasses:
   ElevationLayer 是一个平铺层，用于在 SceneView 中渲染高程。通过将地图的 ground 属性设置为 world-elevation，可以将默认的世界高程图层添加到地图中。

let elevLyr = new ElevationLayer({
  // Custom elevation service
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer"
});
// Add elevation layer to the map's ground.
map.ground.layers.add(elevLyr);

6. FeatureLayer 要素图层
   Inheritance: FeatureLayer>Layer>Accessor since 4.0
   Subclasses:
   FeatureLayer 是可以从地图服务或要素服务创建的单个图层； ArcGIS Online 或 ArcGIS Enterprise 门户项目；或来自一系列客户端功能。图层可以是空间的（具有地理特征）或非空间的（表）。

空间图层由离散特征组成，每个特征都有一个几何图形，允许它在 2D MapView 或 3D SceneView 中呈现为具有空间上下文的图形。特征还包含数据属性，提供有关它所代表的真实世界特征的附加信息；属性可以在弹出窗口中查看并用于渲染图层。可以查询、分析和渲染 FeatureLayers，以在空间上下文中可视化数据。

非空间图层是没有表示地理特征的空间列的表。

7. GraphicsLayer 图形图层
   Inheritance: GraphicsLayer>Layer>Accessor since 4.0
   Subclasses:
   GraphicsLayer 包含一个或多个客户端图形。 GraphicsLayer 中的每个图形都在 SceneView 或 MapView 内的 LayerView 中呈现。图形包含代表现实世界现象的离散矢量几何图形。

与 FeatureLayer 和 MapImageLayer 不同，GraphicsLayer 没有schema。因此，组成 GraphicsLayer 的图形可能有不止一种几何类型（点、线或多边形）。每个图形都必须有自己的符号，因为 GraphicsLayer 不能有关联的渲染器。图形也可能包含彼此不同的属性模式。
如需要rendering, querying, and labeling 等功能，还是用FeatureLayer的source属性构建客户端图形（一个图层一种几何类型）。

8. GroupLayer 组
   Inheritance: GroupLayer>Layer>Accessor since 4.0
   Subclasses:
   GroupLayer 提供了将多个子层组织成一个公共层的能力。假设有几个 FeatureLayer 都代表不同维度的水特征。例如，井（点）、溪流（线）和湖泊（多边形）。 GroupLayer 提供了将它们视为一个称为“水景”的图层的功能，即使它们被存储为单独的要素图层。为此，创建一个新的 GroupLayer 并使用 add() 方法将每个水层添加到 GroupLayer。 每个图层的可见性在 listMode 和 visibilityMode 属性中进行管理。

9. ImageryLayer 动态影像
   Inheritance: ImageryLayer>Layer>Accessor since 4.0
   Subclasses:
   将动态影像服务资源表示为图层。 ImageryLayer 从动态影像服务中检索和显示数据。影像服务支持访问镶嵌影像、其目录以及目录中的各个栅格。影像服务支持动态访问和切片访问。动态访问提供更多功能，而切片访问提供更快的和可扩展的对预处理的切片访问。
   ImageryLayer 可以在【服务器渲染】或【客户端渲染】。本节讨论在应用程序中渲染 ImageryLayer 时可以采用的不同方法。

• 应用 renderingRule 渲染规则
  图像服务可以通过图层的 renderRule 属性支持动态处理。渲染规则定义请求的图像应如何渲染或处理。您可以使用随影像服务发布的栅格函数来处理影像。您还可以使用众所周知的栅格函数，例如用于高程数据的山体阴影函数hillshade function、用于多光谱数据的拉伸函数stretch function以及用于专题数据的颜色图函数 colormap function。当将renderRule 应用于图层时，会向服务器发出网络请求要处理的图像。

• 应用 renderer 渲染器
  ImageryLayer 支持各种渲染器，默认使用【服务器端渲染】。 ImageryLayer 解析用户指定的渲染器，并利用服务器或用户指定的渲染规则来实现图像的预期渲染。服务器处理并渲染 ImageryLayer 并向客户端返回一个可以绘制的 jpg 或 png 图像。
  当使用 lerc 格式创建 ImageryLayer 时，客户端可以访问可用于客户端分析和渲染的原始数据。如果未指定 pixelFilter 函数，则将利用可用图像信息的默认渲染器应用于具有 lerc 格式的 ImageryLayer。用户可以通过应用渲染器或像素过滤器在客户端更改此默认渲染器。如果现有的渲染器不能满足您的要求，pixelFilter 是一个不错的选择。如果将渲染器和像素过滤器都应用于图层，则像素过滤器将优先，应用其逻辑。

• 应用 pixelFilter
  当 ImageryLayer 的 format 设置为 lerc 时，pixelFilter 可用于对原始图像像素进行着色。它是一个处理像素数据的函数。 pixelData 对象包含一个 pixelBlock 属性，可让您访问客户端上光栅中的所有像素。在 pixelFilter 内，您可以循环遍历所有像素并对其进行处理。如果现有渲染器不满足您的要求，此功能是一个有用的替代方法，因为它使您可以控制如何为图像像素着色。如果将渲染器和像素过滤器都应用于图层，则像素过滤器将具有优先权并应用其逻辑。

10. ImageryTileLayer 影像切片-客户端
    Inheritance: ImageryTileLayer>Layer>Accessor since 4.16
    Subclasses:
    ImageryTileLayer 呈现来自切片影像服务的栅格数据。二进制光栅切片在客户端进行投影、处理和渲染。

const renderer = new RasterShadedReliefRenderer({
  altitude: 45, // angle of elevation above the horizon
  azimuth: 315, // position along the horizon
  hillshadeType: hillshadeType, // either "traditional" or "multi-directional"
  zFactor: 1,
  scalingType: "adjusted",
  colorRamp: colorRamp
});

const layer = new ImageryTileLayer({
  url: url,
  renderer: renderer // set the renderer on the layer
});

11. IntegratedMeshLayer 倾斜摄影图层
    Inheritance: IntegratedMeshLayer>Layer>Accessor since 4.1
    Subclasses:
    IntegratedMeshLayer 旨在将难以访问的基础设施和自然景观的场景视图中的准确表示可视化。
    集成网格数据 Integrated mesh data 通常通过自动化过程捕获，用于从大量重叠图像构建 3D 对象。结果使用三角形交错结构将原始输入图像信息集成为纹理网格。集成网格可以用逼真的纹理表示建筑和自然的 3D 特征，例如建筑墙壁、树木、山谷和悬崖。集成的网格场景图层将始终在地表前面渲染。它们通常是为全市范围的 3D 制图创建的，可以使用 Drone2Map for ArcGIS 创建，然后可以共享到 ArcGIS for Desktop 或 web 应用程序。

IntegratedMeshLayer = new IntegratedMeshLayer({
  url: "https://tiles.arcgis.com/tiles/u0sSNqDXr7puKJrF/arcgis/rest/services/Frankfurt2017_v17/SceneServer/layers/0"
});

12. MapImageLayer 地图图层
    Inheritance: MapImageLayer>Layer>Accessor since 4.4
    Subclasses:
    MapImageLayer 允许您显示和分析来自地图服务中定义的子图层的数据，导出图像而不是要素。地图图像服务是根据请求在服务器上动态生成的，请求中包括 LOD（详细程度）、边界框、dpi、空间参考和其他选项。在 2D 中，导出的图像具有指定的整个地图范围。在 3D 中，会导出两个图像：靠近相机的区域的分辨率较高的图像和远离相机的区域的分辨率较低的图像。
    MapImageLayer 不显示切片服务。

13. PointCloudLayer 点云图层
    Inheritance: PointCloudLayer>Layer>Accessor since 4.2
    Subclasses:
    PointCloudLayer 旨在可视化 SceneView 中的大量点集合。

14. RouteLayer 路线图层
    Inheritance: RouteLayer>Layer>Accessor since 4.23
    Subclasses:
    停靠点、障碍点

15. SceneLayer
    Inheritance: SceneLayer>Layer>Accessor since 4.0
    Subclasses:
    SceneLayer 是一种专为按需流式传输和在 SceneView 中显示大量数据而设计的图层类型。 SceneLayers 支持两种几何类型：点和 3D 对象（例如建筑物）。
    【能力】通过renderers可视化、通过definitionExpression过滤数据、弹出框、查询、获取空间范围、编辑更新

16. StreamLayer
    Inheritance: StreamLayer>Layer>Accessor since 4.0
    Subclasses:
    StreamLayer 连接到流服务或自定义 WebSocket 服务，实时显示与一组跟踪对象关联的观察流。观察可以包括对位置、属性或两者的更改。流图层可以包含点、折线或面要素。

17. TileLayer
    Inheritance: TileLayer>Layer>Accessor since 4.4
    Subclasses:
    缓存切片服务（比动态地图服务快）、必须使用缓存地图服务url创建、
    sceneview场景下切片地图的限制

• 10.3 ArcGIS server+
• viewingMode为global时，只支持 ArcGIS Online/Bing Maps/Google Maps (Web Mercator), WGS84 Geographic Coordinate System or CGCS200, Version 2 tiling scheme
• viewingMode为local时，只支持 投影后的切片服务
• …

17. VectorTileLayer
    Inheritance: VectorTileLayer>Layer>Accessor since 4.0
    Subclasses:
    VectorTileLayer 访问缓存的数据切片并以矢量格式呈现。它类似于WebTileLayer中的缓存上下文 ；但是，WebTileLayer 呈现为一系列图像，而不是矢量数据。与光栅图块不同，矢量图块可以适应其显示设备的分辨率，并且可以重新设置样式以用于多种用途。 VectorTileLayer 提供样式化的地图，同时利用栅格地图切片缓存技术和矢量地图的数据。
    VectorTileLayer 的显示方式由 Mapbox 样式规范定义。 VectorTileLayer 样式信息与其图块分开存储。这意味着一组矢量切片可以以多种方式设置样式，而无需为每种样式生成新的图像缓存。这有助于节省空间并加快创建新地图样式的过程。
    更新样式：loadStyle()修改全部样式，setLayoutProperties or setPaintProperties 修改部分样式

18. VoxelLayer
    Inheritance: VoxelLayer>Layer>Accessor since 4.22
    Subclasses:
    VoxelLayer表示多维体积数据。例如，大气或海洋数据、地下地质模型或时空立方体可以可视化为体素层。VoxelLayer 可以在?SceneView中可视化，viewingMode设置为 local。
    【限制】只支持在【local】场景下。

使用体素图层探索与其他内容的空间关系。例如，可视化为体素层的地下模型可以与建筑物或地下设施一起查看，以评估地下的计划建设或维护。
19. WCSLayers beta版
Inheritance: WCSLayers >Layer>Accessor since 4.17
Subclasses:
WCSLayers 提供来自OGC Web 覆盖服务的栅格数据。栅格数据在客户端进行投影和渲染。它支持版本 1.0.0、1.1.0、1.1.1、1.1.2 和 2.0.1。对于 2.0.1 版本，它支持支持 GEOTIFF 覆盖的服务器并实现以下扩展：Scaling、Interpolation、Range Subsetting、CRS 和 KVP/Get。

20. WebTileLayer
    Inheritance: WebTileLayer>Layer>Accessor since 4.4
    Subclasses: openStreetMapLayer
    WebTileLayer 提供了一种将非 ArcGIS Server 地图切片作为图层添加到地图的简单方法。构造函数采用 URL 模板，该模板通常遵循 http://some.domain.com/{level}/{col}/{row}/ 其中 level对应于缩放级别的模式， column、row分别表示切片的列和行。这种模式不是必需的，但它是目前网络上最常见的一种。
    subDomains属性可用于指定提供切片以加快切片检索的子域（使用 subDomains 可以绕过浏览器对域的最大并发请求数限制）。如果指定了子域，则urlTemplate应包含{subDomain}占位符。版权属性可用于定义将显示在地图的属性小部件中的属性信息。

1.2extend 扩展类

1. BingMapsLayer
   Inheritance: BingMapsLayer > BaseTileLayer >Layer>Accessor since 4.8
   Subclasses:
   该图层支持 Microsoft 的 Bing 切片地图。支持三种地图样式 - road, aerial, hybrid。请注意，使用此图层需要有效的 Bing 地图密钥。

let bing = new BingMapsLayer({
          style: "aerial",
          key: "~~~~~~~~~~~~~~~~~~~~~~~~ Bing Maps key ~~~~~~~~~~~~~~~~~~~~~~~~~"
        });
        let map = new Map({
          basemap: {
            baseLayers: [bing]
          }
        });

2. OpenStreetMapLayer
   Inheritance: OpenStreetMapLayer > WebTileLayer >Layer>Accessor since 4.16
   Subclasses:
   允许您使用来自 OpenStreetMap 的底图。设置 tileservers 属性以更改要使用的 OpenStreetMap 切片。

1.3特殊服务来源 -服务url

1. OGCFeatureLayer
   Inheritance: OGCFeatureLayer>Layer>Accessor since 4.16
   Subclasses:
   OGCFeatureLayer 类用于基于来自 OGC API 功能服务的各个集合创建图层。

2. WFSLayer
   Inheritance: WFSLayer>Layer>Accessor since 4.20
   Subclasses:
   WFSLayer 用于创建基于 OGC 网络要素服务 (WFS) 的图层

3. WMSLayer
   Inheritance: WMSLayer>Layer>Accessor since 4.4
   Subclasses:
   WMSLayer 用于创建基于 OGC 网络地图服务 ( WMS) 的图层

4. WMTSLayer
   Inheritance: WMTSLayer>Layer>Accessor since 4.4
   Subclasses:
   WMTSLayer 用于创建基于 OGC 网络切片服务 (WMTS) 的图层

1.4特殊数据来源 -数据data

1. CSVLayer
   Inheritance: CSVLayer>Layer>Accessor since 4.1
   Subclasses:
   CSVLayer 是基于 CSV 文件（.csv、.txt）的点图层。 CSV 是一种纯文本文件格式，用于表示表格数据，包括地理点要素（纬度、经度）。通常，纬度坐标是 Y 值，经度坐标是 X 值。 X、Y 坐标必须存储在 csv 提要中的 SpatialReference.WGS84 中。

CSVLayer 一次获取所有数据，并在加载时将它们存储在客户端。但是，如果设置了 refreshInterval 或调用了 refresh() 方法，CSVLayer 将发出服务器端请求以获取更新的数据。请参阅 FeatureLayer 的查询数据部分以了解有关如何查询 csv 数据的更多信息，并参阅数据可视化部分以了解如何更改 CSVLayer 的可视化。

require(["esri/layers/CSVLayer"], function(CSVLayer){
        // points to the states layer in a service storing U.S. census data
        const csvLayer = new CSVLayer({
          url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv",
          copyright: "USGS Earthquakes"
        });
        map.add(csvLayer);  // adds the layer to the map

        <!-- 或者通过blob方式 -->
        const csv = `name|year|latitude|Longitude
        aspen|2020|40.418|20.553
        birch|2018|-118.123|35.888`;

        const blob = new Blob([csv], {
          type: "plain/text"
        });
        let url = URL.createObjectURL(blob);
      });

2. GeoJSONLayer
   Inheritance: GeoJSONLayer>Layer>Accessor since 4.11
   Subclasses:
   GeoJSONLayer 类用于创建基于 GeoJSON 的图层。 GeoJSON 是一种用于编码各种地理数据结构的格式。 GeoJSON 数据必须符合 RFC 7946 规范，该规范指出坐标位于 SpatialReference.WGS84 中。请参阅 FeatureLayer 的查询数据部分以了解有关如何查询 geojson 数据的更多信息，以及数据可视化部分以了解如何更改 GeoJSONLayer 的可视化。

有关 GeoJSON 支持的几何对象及其对应的几何类型，请参见下表：

3. GeoRSSLayer
   Inheritance: GeoRSSLayer>Layer>Accessor since 4.3
   Subclasses:

4. KMLLayer
   Inheritance: KMLLayer>Layer>Accessor since 4.5
   Subclasses:
   KMLLayer 类用于基于 KML 文件（.kml、.kmz）创建图层。 KML 是一种基于 XML 的文件格式，用于表示地理特征。

// Typical usage
KMLLayer = new KMLLayer({
  url: "http://quickmap.dot.ca.gov/data/lcs.kml"// url to the service
});

二、易混淆的layers

1. imagelayers

• imagerylayer ：加载的是栅格影像服务，名字带image，但是是可交互，可查询，不是“死图片”；可以在客户端渲染，也可以在服务器端渲染。
• imagerytilelayer：加载的服务是切片栅格影像服务；
• mapimagelayer ：客户端发起带参数请求，服务器端动态生成的图片返回前端展示，是“死图片”。

2. tilelayers

• basetilelayer ：切片图层可扩展基类，没有构造函数，不能创建实例，只能通过.createSubclass方法创建子类。
• tilelayer：使用ArcGIS server创建的切片地图服务，有缓存，比mapimagelayer快。
• imagerytilelayer ：【栅格】影像的【切片】服务图层类。前端接收二进制栅格切片进行投影、预处理、渲染。
• vectortilelayer 数据的缓存切片，并以矢量格式渲染。缓存方式类似webtilelayer，一个是图片，一个是矢量数据。
• webtilelayer 非ArcGIS server的地图切片服务加载到地图中。