添加要素图层

了解如何访问和显示要素图层中的点、线和面要素。

要素图层是要素服务的数据集。要素图层的每个要素都具有同样的几何类型 (点、线或面) 和属性。要素图层可以用来存储、访问和管理大数据量地理数据。通过访问要素服务的 URL 可以获取要素。

在本教程中，将使用 URL 访问和显示三种不同类型的托管要素图层：

• 登山点 (点)
• 徒步路线 (线)
• 公园和广场 (面)

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

1. 通过 require 引入FeatureLayer 模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   html

   <script>
       require([
           "geoscene/config",
           "geoscene/Map",
           "geoscene/views/MapView",
   
           "geoscene/layers/FeatureLayer"
       ], function(geosceneConfig, Map, MapView, FeatureLayer) {
   
       });
   </script>

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

添加点要素图层 ​

点要素通常显示其他类型的要素图层上。接下来引用 登山点创建一个FeatureLayer ，然后将其添加到地图中。

1. 查看 登山点 图层属性。示例中我们使用到 Name、Type、Drawing Info 和 Fields 属性。

2. 在 CodePen 中，创建 FeatureLayer 并设置 url 属性。

   js

   const view = new MapView({
       container: "viewDiv",
       map: map,
       center: [-118.80543,34.02700],
       zoom: 13
   });
   
   //登山点 feature layer (points)
   const trailheadsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

3. 将 trailheadsLayer 添加到地图。

   js

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

   1
   2
   3
   4
   5
   6
   

4. 运行应用程序，在地图中查看登山点 图层。

添加线要素图层 ​

线要素通常需要在点要素图层下显示，避免压盖。引用 徒步路线 创建 FeatureLayer 类，然后将要素图层添加到地图中。

1. 访问 徒步路线 图层属性。示例中我们将使用 Name、Type、Drawing Info 和 Fields 字段。

2. 在 CodePen 中，创建 FeatureLayer 并设置 url 属性。

   js

   map.add(trailheadsLayer);
   
   //徒步路线 feature layer (lines)
   const trailsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
   });

   1
   2
   3
   4
   5
   6
   

3. 添加图层到地图中，设置索引参数为 0 ，这样可以将 trailsLayer 添加到图层数组第一个，并在 trailheadsLayer 之前绘制。

   js

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

   1
   2
   3
   4
   5
   6
   

4. 运行应用程序以在地图中查看 Trails 图层。

添加面要素图层 ​

面要素通常在线要素图层之前。引用 公园和广场图层URL 创建 FeatureLayer 类 ，然后将要素图层添加到地图中。

1. 查看 公园和广场图层 属性。示例中我们使用 Name、Type、Drawing Info 和 Fields 字段。

2. 在 CodePen 中，创建 FeatureLayer 并设置 url 属性。

   js

   map.add(trailsLayer, 0);
   
   // 公园和广场 (polygons)
   const parksLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
   });

   1
   2
   3
   4
   5
   6
   

3. 添加图层到地图中，设置索引参数为 0 将 parksLayer 添加到地图中。这样可确保添加到图层数据第一位，并在 trailsLayer 之前绘制。

   js

   // 公园和广场 (polygons)
   const parksLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
   });
   
   map.add(parksLayer, 0);

   1
   2
   3
   4
   5
   6
   

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

最终，地图视图会显示地图中的三个要素图层，并按以下顺序绘制：

1.地形图底图图层

2.公园和广场 (面)

3.徒步路线 (线)

4.登山点 (点)

请务必按正确的顺序添加要素图层，以便正确显示要素（不重叠），并可与要素进行交互。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：

• 显示弹出窗口

• 样式化要素图层

• 查询要素图层 (SQL)