ArcGIS API for JavaScript——获取FeatureLayer的属性值
来源：互联网 发布：网络协议教程 编辑：程序博客网 时间：2024/06/05 03:00
ArcGIS API for JavaScript——获取FeatureLayer的属性值
当我们将一个图层发布为服务后，在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);//输出graphicsconsole.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 mapif(featureLayer.graphics.length >= 1){ // do your thingconsole.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 0
- ArcGIS API for JavaScript——获取FeatureLayer的属性值
- ArcGIS API for JavaScript——要素服务（FeatureLayer）
- ArcGIS for Android FeatureLayer的属性更新
- ArcGIS for Android 获取FeatureLayer的图例
- Arcgis for Javascript之featureLayer图和属性的互操作
- Arcgis for Javascript之featureLayer图和属性的互操作
- 【ArcGIS API For JS】关于FeatureLayer的批量编辑
- ArcGIS for Android 获取webmap的popup window（FeatureLayer）
- arcgis api for javascript(一)使用自定义数据对FeatureLayer进行渲染
- acrgis api for javaScript中的FeatureLayer查询
- 缓冲区分析—ArcGIS API for JavaScript
- arcgis api for js featurelayer 两种查询方式
- arcgis api javascript 之FeatureLayer图层实现热力图
- arcgis for javascript 添加featurelayer,设置地图最大最小等级
- ArcGIS API for JavaScript 4.2发布——厉害了我的ArcGIS
- ArcGis API for JavaScript学习——离线部署API
- ArcGIS API for JavaScript
- 对于ArcGIS API for Javascript的配置
- Android Studio config.gradle文件配置
- 一款好看的日历控件
- String切割的方法。
- Hadoop-Azkaban-1
- Hibernate---QBC检索与本地SQL检索
- ArcGIS API for JavaScript——获取FeatureLayer的属性值
- 获取隐藏元素个数
- Hadoop-Sqoop-1
- 实战:sqlserver 数据实时同步到mysql
- attr()修改bootstrapTable自定义属性
- Android Sensor分析
- 一个好看的时间控件
- XP安装DX 地址和Error code s1023错误
- Java 操作HDFS 简单案例 (Kerberos已开启)
