当前位置：服务支持 > 软件文章 > ArcGIS JS API加载FeatureLayer：4.加载方法详解

ArcGIS JS API加载FeatureLayer：4.加载方法详解

阅读数 13

概述

本节您将学到： 怎么加载FeatureLayer(要素图层)。

应用可以可以接受和显示托管在 ArcGIS Online 和 ArcGIS Enterprise上的要素图层。一个要素图层包含一系列的要素图形和属性。每个feature layers都有一个唯一的REST风格的URL地址，要素图层可以通过这个URL在地图上绘制要素图层中的点、线、面要素。如果要素图层的没有预先配置renderer或者pop-up，将会使用默认符号渲染，并且弹出框（pop-up）不可用。如何配置要素图层的 可视化 以及交互，可以查看以下几个教程。

展示效果请点击：https://s.codepen.io/esri_devlabs/debug/JZawYY

撸代码步骤

创建一个简单HTML页面

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

添加名为Trailheads的feature layer

在require中加入FeatureLayer的模块引用并且更新function的参数。

require([
  "esri/Map",
  "esri/views/MapView",
  //*** 加入FeatureLayer 引用 ***//
  "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {

在main方法尾创建一个FeatureLayer对象，并且设置它的url属性为Trailheads 要素图层的地址，最后把FeatureLayer对象加入到Map中。

每个要素图岑都指向一个托管的要素服务，并且提供一种简单的方式加入到地图中。可以通过一个URL并指定相应的端点(endpoint)来获取相应的服务数据。你也可以直接通过浏览器反问相应的URL和端点来查看相应的数据。在默认情况下，地图界面只会请求当前视窗范围的要素。你可以同指定SQL_type和definitionExpression来过滤要素。

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

运行代码，可以看到属性为Trailheads要素图层已经加入到地图上了。

添加Trails和Parks and Open Space要素图层

通过要素的图层的URL添加Trails（线状）和Parks and Open Space（面状）要素图层，并在添加到Map中使用0作为第二个参数指定添加到第一个图层中，保证地图能按照先面后线再点的顺序绘制。

地图图层记录在layers属性的集合中，图层的绘制顺序也是和集合中图层顺序相同（集中排在越后的图层越晚绘制）。如果在添加图层的add方法中指定了index参数，则加入的图层会插入到index指定位置，如果没有指定index参数，则默认插入到集合的最后一个。为了保证地图正确的绘制顺序，通常情况下都是先添加面图层，然后线图层，最后添加点图层。

// Trails feature layer (线图层)
var trailsLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0);
// Parks and open spaces (面图层)
var parksLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0);

运行代码，可以看到地图显示这个三个要素图层。

注意：这些的托管的feature layer 在服务端没有配置样式和弹出框（pop-ups）,所以在地图中会使用默认样式来绘制它们。想了解feature layer 的可视化，可以参考以下文章：服务端配置：https://developers.arcgis.com/labs/arcgisonline/configure-layers/ 客户端配置：https://developers.arcgis.com/labs/javascript/style-feature-layers

到此您已经完成了。

您的页面应该是这样：https://codepen.io/esri_devlabs/pen/JZawYY?editors=1000
页面效果

完整代码

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function(Map, MapView, FeatureLayer) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",  
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13            
      });

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

      // Trails feature layer (线状)
      var trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
      });
      map.add(trailsLayer, 0);

      // Parks and open spaces (面状)
      var parksLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
      });

      map.add(parksLayer, 0);

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

再撸点

探索 feature layers

访问下面的feature layer的地址，可以查看相关feature layer元数据、要素数据、支持的方法等。每个服务链接都是展示服务的图层类型、图形类型、图层范围、绘制信息、字段信息等。在每个页面的底端的Supported Options中尝试使用Query功能查找并返回相关记录。FeatureLayer可使用这些函数来获取数据和在地图中绘制。

更多关于feature layers的知识可以查看以下文章:

Import data:https://developers.arcgis.com/labs/arcgisonline/import-data/
Explore layer data:https://developers.arcgis.com/labs/arcgisonline/explore-layer-data/

给feature layer设置属性

FeatureLayer可以设置相关的属性来改变其绘信息以及其行为信息。通过设置definitionExpression属性可让trails图层只显示海拔为250 ft以下的数据，设置render可以让图层以绿色绘制，设置popupTemplate可以在点击要素时弹出名称以及其他字段信息的弹出框。

// Trails feature layer (线状)
   var trailsLayer = new FeatureLayer({
     url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
     //*** ADD 只显示海拔小于250的数据 ***//
     definitionExpression: "ELEV_GAIN < 250",

     //*** ADD ***//
     renderer: {
       type: "simple",
       symbol: {
         type: "simple-line",
         color: "green",
         width: "2px"
       }
     },

     //*** 弹出框显示的字段信息 ***//
     outFields: ["TRL_NAME","ELEV_GAIN"],

     //*** ADD ***//
     popupTemplate: {  // 启用弹出框
       title: "{TRL_NAME}",
       content: "The trail elevation gain is {ELEV_GAIN} ft."
     }
   });

更多图层操作相关知识，可以参考以下文章：