介绍
FeatureLayer（要素图层）是ArcGIS Server发布的一种很重要的地图服务，发布后可以直接提供url给前端进行添加展示，点击要素图层后还可以查看要素的属性，并且可以设置一些属性名显示在图层上。
添加图层
添加要素图层的方法跟添加其它的图层一样，首先引用要素图层类FeatureLayer,然后通过图层服务地址进行初始化，如下所示：
var featureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/1",{
outFields: ["*"],
popupTemplate:popupTemplate,
id:'featureLayer'
});
map.layers.add(subFeatureLayer);
outFields：定义可以显示的字段名称
popupTemplate：弹出显示的模板
id：图层ID。
图层上显示地名
通过设置FeatureLayer的labelingInfo可以将指定的字段名显示在图层上，比如在图层上显示要素的地名，可以用labelingInfo属性来添加。首先用TextSymbol创建一个文本显示的符号样式，可以设置文本的颜色、字体等信息，然后再创建LabelClass，用于设置显示的字段名、再将设置好的TextSymbol赋值给labelClass.symbol，最后再设置FeatureLayer的labelingInfo，如下所示：
var statesLabel = new TextSymbol()
statesLabel.color = new Color("#ffffff");
statesLabel.font = {
size: 10
}
var labelClass = new LabelClass({
"labelExpressionInfo": {
"value": "{XZQMC}"
}
});
labelClass.symbol = statesLabel;
featureLayer.labelingInfo = [labelClass];
featureLayer.showLabels = true;
subFeatureLayer.labelingInfo = [labelClass];
subFeatureLayer.showLabels = true;
点击要素查询
点击要素图层后，可以获取到点击区域的基本信息，首先给mapView添加一个点击事件，然后查找到对应的图层，再通过layer.createQuery()来创建一个查询对象，再设置查询对象的geometry，再通过queryFeatures进行查询，具体代码如下所示：
mapView.on('click',function (event) {
let layer = this.map.findLayerById('featureLayer');
// 创建查询对象
let query = layer.createQuery()
// 将点击的点放入查询对象中
query.geometry = {
type: 'point', // autocasts as new Point()
longitude: event.mapPoint.x,
latitude: event.mapPoint.y,
spatialReference: 4527//arcgis js Unable to perform query operation
}
// 设置缓冲区
query.distance = 6
// 设置查询方式（相交）
query.spatialRelationship = 'intersects'
let a = layer.queryFeatures(query).then((res) => {
var features = res.features;
if(features && features.length > 0){
var feature = features[0];
}
})
});
完全代码如下所示：
<!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>地图</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.esri-ui-corner,.esri-attribution{
display: none!important;
}
</style>
<script>
var map;
var mapView;
require([
"esri/Map", "esri/views/MapView","esri/layers/FeatureLayer","esri/symbols/TextSymbol","esri/layers/support/LabelClass","esri/Color"],
function(Map,MapView,FeatureLayer,TextSymbol,LabelClass,Color,ImageryLayer)
{
var extent = {
xmin: 39278691.5235081,
ymin: 2614845.651735926,
xmax: 39452970.499419704,
ymax: 2731153.551714707,
spatialReference: 4527
}
var lods = [
{ "level": 0, "resolution": 156543.03392800014, "scale": 5.91657527591555E8},
{ "level": 1, "resolution": 78271.51696399994, "scale": 2.95828763795777E8},
{ "level": 2, "resolution": 39135.75848200009, "scale": 1.47914381897889E8},
{ "level": 3, "resolution": 19567.87924099992, "scale": 7.3957190948944E7},
{ "level": 4, "resolution": 9783.93962049996, "scale": 3.6978595474472E7},
{ "level": 5, "resolution": 4891.96981024998, "scale": 1.8489297737236E7},
{ "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618},
{ "level": 7, "resolution": 1222.992452562495, "scale": 4622324.434309},
{ "level": 8, "resolution": 611.4962262813797, "scale": 2311162.217155},
{ "level": 9, "resolution": 305.74811314055756, "scale": 1155581.108577},
{ "level": 10, "resolution": 182.87405657041106, "scale": 577790.554289},
{ "level": 11, "resolution": 76.43702828507324, "scale": 288895.277144},
{ "level": 12, "resolution": 38.21851414253662, "scale": 144447.638572}
];
map = new Map();
//二维视图，并初始化视图位置
mapView = new MapView({
container: "map",
map: map,
slider: false,
lods:lods,
zoom:10,
extent: extent
});
var popupTemplate = {
title: "行政区数据",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "XZQMC",
label: "行政区名称",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "XZQDM ",
label: "行政区代码",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "DCMJ",
label: "调查面积(平方米)",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "JSMJ ",
label: "计算面积(平方米)",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
//镇级图层
var featureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/1",{
outFields: ["*"],
popupTemplate:popupTemplate,
id:'featureLayer'
});
//村级图层
var subFeatureLayer = new FeatureLayer("http://192.168.138.105:6080/arcgis/rest/services/XNSYDT/FeatureServer/0",{
outFields: ["*"],
popupTemplate:popupTemplate
});
var statesLabel = new TextSymbol()
statesLabel.color = new Color("#ffffff");
statesLabel.font = {
size: 10
}
var labelClass = new LabelClass({
"labelExpressionInfo": {
"value": "{XZQMC}"
}
});
labelClass.symbol = statesLabel;
featureLayer.labelingInfo = [labelClass];
featureLayer.showLabels = true;
subFeatureLayer.labelingInfo = [labelClass];
subFeatureLayer.showLabels = true;
map.layers.add(featureLayer);
map.layers.add(subFeatureLayer);
mapView.on('click',function (event) {
let layer = this.map.findLayerById('featureLayer');
// 创建查询对象
let query = layer.createQuery()
// 将点击的点放入查询对象中
query.geometry = {
type: 'point', // autocasts as new Point()
longitude: event.mapPoint.x,
latitude: event.mapPoint.y,
spatialReference: 4527//arcgis js Unable to perform query operation
}
// 设置缓冲区
query.distance = 6
// 设置查询方式（相交）
query.spatialRelationship = 'intersects'
let a = layer.queryFeatures(query).then((res) => {
var features = res.features;
if(features && features.length > 0){
var feature = features[0];
}
})
});
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
网友评论