添加要素图层

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

要素图层是托管在要素服务中的数据集。每个要素图层包含具有单一几何类型 (点、线或面) 和属性组的要素。要素图层可以用来存储、访问和管理应用程序的大量地理数据。通过要素图层的服务地址 URL 可以获取到它的要素数据。

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

步骤

创建新 Pen

要开始使用，请完成显示地图教程或使用此 Pen。

添加模块

在 require 语句中，添加 FeatureLayer 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Change line
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {      const map = new Map({
        basemap: "tianditu-vector"
 　　　　 });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
  　　　　});    });
</script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

添加点要素图层

点要素通常显示在其他图层之上。使用 FeatureLayer 类引用 Trailheads URL ，然后将点要素图层添加到地图中。

转至 Trailheads URL 并浏览图层的属性。记下 Name、Type、Drawing Info 和 Fields 属性。

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

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {      const map = new Map({
        basemap: "tianditu-vector"
  　　　　});

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

    //Trailheads 要素图层 (点)
      const trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
  　　　　});
    });
</script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

将 trailheadsLayer 添加到地图。

Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector"
  });

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

//Trailheads 要素图层 (点)
  const trailheadsLayer = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
  });

  map.add(trailheadsLayer);
  });
</script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序以在地图中查看 Trailheads 图层。

添加线要素图层

线图层通常会要在点图层前显示。使用 FeatureLayer 类引用 Trails URL 并将线要素图层添加到地图中。

转至 Trails URL 并浏览图层的属性。记下 Name、Type、Drawing Info 和 Fields 属性。

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

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector"
  });

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

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

  map.add(trailheadsLayer);

//Trails 要素图层 (线)
  const trailsLayer = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
  });
  });
</script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

使用索引 0 将 trailsLayer 添加到地图中。这可确保将图层添加到数组的顶部，并在 trailheadsLayer 之前绘制。

Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector"
  });

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

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

  map.add(trailheadsLayer);

//Trails 要素图层 (线)
  const trailsLayer = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
  });

  map.add(trailsLayer, 0);
  });
</script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

添加面要素图层

面要素通常在线要素之前显示。使用 FeatureLayer 类引用 Parks and Open Spaces URL 并将要素添加到地图中。

转至 Parks and Open Spaces URL 并浏览图层的属性。记下 Name、Type、Drawing Info 和 Fields 属性。

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

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector"
  });

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

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

  map.add(trailheadsLayer);

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

  map.add(trailsLayer, 0);

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

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

使用索引 0 将 parksLayer 添加到地图中。这可确保将图层添加到数组的颈部，并在 trailsLayer 之前绘制。

Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加要素图层</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>

  <script>
  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/layers/FeatureLayer"

  ], function(geosceneConfig,Map, MapView, FeatureLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector"
  });

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

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

  map.add(trailheadsLayer);

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

  map.add(trailsLayer, 0);

// Parks and open spaces (面)
  const 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>

运行应用程序

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

地图视图应显示地图中的所有三个要素图层。地图视图按以下顺序绘制地图：

底图图层
Parks and Open Spaces (面)
Trails (线)
Trailheads (点)

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

下一步是什么？

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

上一主题添加点、线和面下一主题样式化要素图层

解决方案

在 CodePen 中查看

估计时间

10 分钟