JavaScript ArcGIS FeatureLayer用法及代码示例

引用服务 URL

要从服务创建 FeatureLayer 实例，您必须将 url 属性设置为要素服务或Map服务中图层的 REST 端点。为了使图层在视图中可见，必须将其添加到视图引用的Map中。有关向Map添加图层的信息，请参阅Map.add()。

require(["esri/layers/FeatureLayer"], function(FeatureLayer){
  // points to the states layer in a service storing U.S. census data
  const fl = new FeatureLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"
  });
  map.add(fl);  // adds the layer to the map
});

可以从服务中的表 url 创建非空间表实例，并且必须通过调用 load() 方法加载该表。

// Add a non-spatial table.
require(["esri/layers/FeatureLayer"], function(FeatureLayer){
  // points to the non-spatial table in a service storing San Francisco crime incidents.
  const table = new FeatureLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/FeatureServer/1"
  });
  table.load().then(function() {
     // table is loaded. ready to be queried on the server.
  });
});

如果从不同的域请求服务，则需要 CORS enabled server 或 proxy。

引用 ArcGIS 门户项目 ID

如果 ArcGIS Online 或 ArcGIS Enterprise 中作为项目存在，您还可以根据其 ID 创建 FeatureLayer。例如，以下代码片段显示如何使用 PortalItem 属性将新的 FeatureLayer 实例添加到Map。

// points to a hosted Feature Layer in ArcGIS Online
const fl = new FeatureLayer({
  portalItem: {  // autocasts as esri/portal/PortalItem
    id: "8444e275037549c1acab02d2626daaee"
  }
});
map.add(fl);  // adds the layer to the map

以下代码片段展示了如何使用 PortalItem 属性创建引用表的FeatureLayer。

// points to a hosted table in ArcGIS Online
const table = new FeatureLayer({
  portalItem: { // autocasts as esri/portal/PortalItem
    id: "123f4410054b43d7a0bacc1533ceb8dc"
  }
});

// Before adding the table to the map, it must first be loaded and confirm it is the right type.
table.load().then(function() {
  if (table.isTable) {
    map.tables.add(table);
  }
});

添加一系列客户端函数

客户端函数也可用于创建函数层。由于 FeatureLayer 需要模式，因此在从 features 数组创建图层时需要设置多个属性。如果使用空间图层，则必须使用 GeometryType 属性以及有效的空间参考来指示要素的几何类型(因为每个图层仅允许一种几何类型)。空间和非空间要素集合都需要 objectId 字段，这必须与字段对象数组一起指示，提供每个字段的架构。指定这些属性后，必须将要素数组设置为源属性。查看create a FeatureLayer with client-side graphics sample 以了解其实际情况。

如果在层初始化时缺少任何必需的参数，API 将尝试从提供的参数中确定所需的参数。例如，spatialReference、geometryType、hasZ 和 hasM 属性可以基于提供给源属性的特征来确定。但是，如果source属性在初始化时为空数组，则无法确定geometryType，并且该图层将被拒绝。

FeatureLayer 初始化后，FeatureLayer 的源不会更新。如果在运行时添加、删除或更新函数，则使用 applyEdits() 更新函数，然后使用 queryFeatures() 返回更新的函数。查看add or remove graphics from a FeatureLayer sample 以了解其实际情况。针对客户端要素图层和图层视图执行的属性查询中使用的属性值区分大小写。

const layer = new FeatureLayer({

   // create an instance of esri/layers/support/Field for each field object
   fields: [
   {
     name: "ObjectID",
     alias: "ObjectID",
     type: "oid"
   }, {
     name: "type",
     alias: "Type",
     type: "string"
   }, {
     name: "place",
     alias: "Place",
     type: "string"
   }],
   objectIdField: "ObjectID", // inferred from fields array if not specified
   geometryType: "point", // geometryType and spatialReference are inferred from the first feature
                          // in the source array if they are not specified.
   spatialReference: { wkid: 4326 },
   source: graphics,  //  an array of graphics with geometry and attributes
                     // popupTemplate and symbol are not required in each feature
                     // since those are handled with the popupTemplate and
                     // renderer properties of the layer
   popupTemplate: pTemplate,
   // a default simple renderer will be applied if not set.
   renderer: uvRenderer  // UniqueValueRenderer based on `type` attribute
});
map.add(layer);

// returns all the graphics from the layer view
view.whenLayerView(layer).then(function(layerView){
  layerView.watch("updating", function(val){
    if(!val){  // wait for the layer view to finish updating
      layerView.queryFeatures().then(function(results){
        console.log(results);  // prints all the client-side features to the console
      });
    }
  });
});

从 FeatureLayerView 上的查询访问特征时，请注意，特征按视图中显示的方式返回，包括可能已应用于特征以增强性能的任何概括。要获取全分辨率的要素几何图形，请在要素图层上使用queryFeatures()方法。

FeatureLayer 类中的查询方法直接从服务查询要素。例如，以下代码片段返回服务中的所有函数，而不仅仅是 FeatureLayerView 中绘制的函数。

// Queries for all the features in the service (not the graphics in the view)
layer.queryFeatures().then(function(results){
  // prints an array of all the features in the service to the console
  console.log(results.features);
});

有关如何为特定图层创建LayerView 的信息，请参阅View.whenLayerView()。

使用上面提到的FeatureLayer 渲染器和查询函数，您可以创建动态的交互式数据探索应用程序。

FeatureLayers 也支持 highlight 。当用户单击或点击函数以查看弹出窗口时，默认情况下会启用此函数。您还可以在FeatureLayerView 上调用highlight() 方法以突出显示其他工作流中的函数，例如显示查询/选择结果和突出显示pointer-move 事件的函数。