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);
//输出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>更多推荐
ArcGIS API for JavaScript——获取FeatureLayer的属性值
发布评论