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

迷南。 2022-06-08 10:43 249阅读 0赞

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

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

<!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); }); </script>
        </head>
    
        <body>
          <div id="map"></div>
        </body>
    
    </html>

运行结果：  
![这里写图片描述][SouthEast 2]  
四、输出图层属性的值  
1、输出featureLayer  
首先看看添加的featureLayer输出的是什么？

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

打开浏览器的控制台可以看到输出的是一个Object对象，包含图层的信息。  
![这里写图片描述][SouthEast 3]  
其中重点是graphics  
![这里写图片描述][SouthEast 4]  
graphics是一个数组，展开graphics可以看到有5个变量，对应5个点的数据。  
![这里写图片描述][SouthEast 5]  
随便展开一个，可以看到图层的属性数据就包含在attributes中。  
![这里写图片描述][SouthEast 6]  
2、输出graphics  
在前面我们看到图层的数据就存在graphics中，那把graphics输出会得到什么呢？

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

运行结果：  
![这里写图片描述][SouthEast 7]  
结果却显示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);      
    }
    });
    ...

运行结果：  
![这里写图片描述][SouthEast 8]  
4、输出attributes

...
    //输出第一条记录的Point变量和NUM变量
    var point=featureLayer.graphics[0].attributes.Point;
    var num=featureLayer.graphics[0].attributes.NUM;
    
    console.log("Point:"+point+" NUM:"+num);
    ...

运行结果：  
![这里写图片描述][SouthEast 9]  
三、完整代码

<!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>

[SouthEast]: /images/20220608/af9714373ed247d486a36ea0e4f83156.png
[SouthEast 1]: /images/20220608/3b3e86318491453385b14b46fd5f7217.png
[SouthEast 2]: /images/20220608/6429e2061dba425c97d5dc94fb3f13e9.png
[SouthEast 3]: /images/20220608/62479295cdde4f168fa82bcac3e829b3.png
[SouthEast 4]: /images/20220608/15d9c90fc8964c51906fec9395d04be8.png
[SouthEast 5]: /images/20220608/94e86b62b5294b15bdc091fbbcc38d91.png
[SouthEast 6]: /images/20220608/5f1cb835cd92449e8dc02deaf2b90342.png
[SouthEast 7]: /images/20220608/80c5623252754e5eb8a5b61f8374bc8e.png
[SouthEast 8]: /images/20220608/4a84678062614c16846aafa1de241ae7.png
[SouthEast 9]: /images/20220608/13b9d0a0e7204f45809490b22f1d48bd.png