ArcGIS API for JavaScript——要素服务（FeatureLayer）

最新推荐文章于 2025-05-25 14:47:29 发布

原创最新推荐文章于 2025-05-25 14:47:29 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #javascript

ArcGis API for JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用ArcGIS JavaScript API将要素服务（FeatureLayer）添加到地图上。通过具体代码示例展示了如何配置FeatureLayer，并将其加载到地图中，包括设置快照模式及输出所有属性字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ArcGIS API for JavaScript——要素服务（FeatureLayer）
将FeatureLayer添加到map上的基本代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <!--引用的是本机离线API -->
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
    <script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true"></script>
    <style>
        html, body, #map {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
    </style>

    <script>
    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "dojo/domReady!"
      ],
      function(
        Map,
        FeatureLayer,
      ) {

        var map = new Map("map");

        /****************************************************************
         * Add feature layer - A FeatureLayer at minimum should point
         * to a URL to a feature service or point to a feature collection 
         * object.
         ***************************************************************/

        // Carbon storage of trees in Warren Wilson College.
        var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/cs/MapServer/0",{
            mode: FeatureLayer.MODE_SNAPSHOT,      //快照模式，重要
            outFields: ["*"]         //输出所有的属性字段
        });
        map.addLayer(featureLayer);

      });
    </script>
    </head>

    <body>
      <div id="map"></div>
    </body>

</html>