ArcGIS API for JavaScript——获取FeatureLayer的属性值

最新推荐文章于 2024-06-07 09:38:08 发布

浮生慢慢

最新推荐文章于 2024-06-07 09:38:08 发布

阅读量2.5k

点赞数

分类专栏： arcgis JavaScript

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

arcgis

3 篇文章 1 订阅

订阅专栏

出自点击打开链接

当我们将一个图层发布为服务后，在JS代码中想取到图层里面的数据该怎么做呢？在下面的例子中将演示当鼠标点击图层点时弹出图层属性的过程。
一、测试数据
这里写图片描述
二、发布服务

三、引用服务

引用服务的代码如下：

<!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",
        "esri/layers/LabelClass",
        "dojo/_base/Color",
        "esri/symbols/Font",
        "esri/symbols/TextSymbol",
        "dojo/domReady!"
      ],
      function(
        Map,
        FeatureLayer,
        LabelClass,Color,Font,TextSymbol
      ) {

        var map = new Map("map",{
            showLabels : true
        });

        /****************************************************************
         * 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: ["*"]  //显示所有字段
        });

        //地名标注
        var labelSymbol = new TextSymbol().setColor(new Color("#000000"));
        labelSymbol.font.setSize("10pt");
        labelSymbol.font.setFamily("新宋体");
        var json = {
            "labelExpressionInfo": {"value": "{Point}"},
            "useCodedValues": false,
            "labelPlacement":"center-right"
        };
        var labelClass = new LabelClass(json);
        labelClass.symbol = labelSymbol;
        featureLayer.setLabelingInfo([ labelClass ]);
        map.addLayer(featureLayer);

      });
    </script>
    </head>

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

</html>

运行结果：

四、输出图层属性的值
1、输出featureLayer

首先看看添加的featureLayer输出的是什么？

...
        map.addLayer(featureLayer);
        console.log(featureLayer);
...

打开浏览器的控制台可以看到输出的是一个Object对象，包含图层的信息。
这里写图片描述

其中重点是graphics
这里写图片描述

graphics是一个数组，展开graphics可以看到有5个变量，对应5个点的数据。
这里写图片描述

随便展开一个，可以看到图层的属性数据就包含在attributes中。
这里写图片描述

2、输出graphics

在前面我们看到图层的数据就存在graphics中，那把graphics输出会得到什么呢？

...
map.addLayer(featureLayer);
//输出graphics
console.log(featureLayer.graphics);
...

运行结果：

结果却显示graphics的长度为0，里面没有数据。
这是因为layer还没有添加到map中，所以拿不到属性数据。

3、添加“update-end”事件

...
map.addLayer(featureLayer);
//添加“update-end”事件
map.on("update-end", function(){           
// update-end event will execute after the layer has been added to the map
if(featureLayer.graphics.length >= 1)
{
       // do your thing
console.log(featureLayer.graphics);      
}
});
...

运行结果：

4、输出attributes

...
//输出第一条记录的Point变量和NUM变量
var point=featureLayer.graphics[0].attributes.Point;
var num=featureLayer.graphics[0].attributes.NUM;

console.log("Point:"+point+"    NUM:"+num);
...

运行结果：

三、完整代码

<!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>
    <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",
        "esri/layers/LabelClass",
        "dojo/_base/Color",
        "esri/symbols/Font",
        "esri/symbols/TextSymbol",
        "dojo/domReady!"
      ],
      function(
        Map,
        FeatureLayer,
        LabelClass,Color,Font,TextSymbol
      ) {

        var map = new Map("map",{
            showLabels : true
        });

        /****************************************************************
         * 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: ["*"]
        });

        //地名标注
        var labelSymbol = new TextSymbol().setColor(new Color("#000000"));
        labelSymbol.font.setSize("10pt");
        labelSymbol.font.setFamily("新宋体");
        var json = {
            "labelExpressionInfo": {"value": "{Point}"},
            "useCodedValues": false,
            "labelPlacement":"center-right"
        };
        var labelClass = new LabelClass(json);
        labelClass.symbol = labelSymbol;
        featureLayer.setLabelingInfo([ labelClass ]);
        map.addLayer(featureLayer);
        //添加“update-end”事件
        map.on("update-end", function(){           
        // update-end event will execute after the layer has been added to the map
        if(featureLayer.graphics.length >= 1)
        {
               // do your thing
            console.log(featureLayer.graphics);  
            var point=featureLayer.graphics[0].attributes.Point;
            var num=featureLayer.graphics[0].attributes.NUM;

            console.log("Point:"+point+"    NUM:"+num);         
        }
        });
      });
    </script>
    </head>

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

</html>

浮生慢慢

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript——获取FeatureLayer的属性值

出自点击打开链接当我们将一个图层发布为服务后，在JS代码中想取到图层里面的数据该怎么做呢？在下面的例子中将演示当鼠标点击图层点时弹出图层属性的过程。一、测试数据二、发布服务三、引用服务引用服务的代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" cont...
复制链接

扫一扫

专栏目录