如何利用ArcGIS JS API操作属性表？-酷北运营网

arcgis js 属性表

在ArcGIS for JavaScript中，属性表是一个重要的组件，用于展示地图要素的属性信息，通过属性表，用户可以更直观地了解地图上各个要素的详细信息，本文将详细介绍如何在ArcGIS for JavaScript中使用属性表，包括创建、显示和操作属性表的基本方法。

总览

ArcGIS for JavaScript提供了多种方式来展示和操作属性表，以下是一些主要功能：

1、属性表的创建：通过FeatureLayer对象获取属性数据并生成属性表。

2、属性表的分页显示：为了提高用户体验，可以将属性表进行分页显示。

3、属性表与地图的互动：实现鼠标悬停高亮显示、点击显示详细信息等功能。

4、自定义渲染：通过设置不同的渲染器，可以自定义要素在地图上的显示样式。

5、查询与过滤：支持对属性表的数据进行查询和过滤操作。

6、弹出框（Popup）：点击地图要素时显示详细信息的弹出框。

7、编辑属性：允许用户编辑地图要素的属性信息。

8、事件处理：为属性表添加各种交互事件，如选择、双击等。

9、导出数据：支持将属性表的数据导出为Excel或CSV文件。

10、集成其他组件：可以与其他ArcGIS for JavaScript组件结合使用，如Toolbar、Editable等。

属性表的创建

要创建属性表，首先需要创建一个FeatureLayer对象，并从该对象中获取所有的记录，以下是一个示例代码：

var ftch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/shpchina/MapServer/0",{
    outFields: ["*"]
});
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
    10,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255,0,0]),
        1
    ),
    new Color([0,255,0,0.25])
);
// 简单渲染
var sr = new SimpleRenderer(symbol);
ftch.setRenderer(sr);
map.addLayer(ftch,1);

有了FeatureLayer对象后，可以通过ftch.graphics获取所有的记录，然后组装成JSON对象：

var graphics = ftch.graphics;
var item = "";
for(var i = 0; i < graphics.length; i++){
    var attr = graphics[i].attributes;
    var id = attr.FID, name = attr.name;
    item += "{\"id\":"+id+",\"text\":'"+name+"'},";
}
item = "[" + item.substring(0,item.length-1) + "]";
var attr = "{'total':" + graphics.length + ",'items':" + item + "}";
PAGE_DATA = eval('(' + attr + ')');

属性表的分页显示

为了提高用户体验，可以将属性表进行分页显示，以下是一个简单的分页显示示例：

function paginateAttributeTable(data, pageSize) {
    var totalPages = Math.ceil(data.length / pageSize);
    var pages = [];
    for (var i = 0; i < totalPages; i++) {
        var startIndex = i * pageSize;
        var endIndex = startIndex + pageSize;
        pages.push(data.slice(startIndex, endIndex));
    }
    return pages;
}
var pageSize = 10;
var paginatedData = paginateAttributeTable(PAGE_DATA.items, pageSize);
console.log(paginatedData);

属性表与地图的互动

实现属性表与地图的互动，可以增强用户体验，当鼠标悬停在地图要素上时显示名称并高亮显示，点击列表显示对象的信息框：

showInfo = function(index){
    var pt = ftch.graphics[index].geometry;
    var attr = ftch.graphics[index].attributes;
    map.infoWindow.setTitle(attr.name);
    map.infoWindow.setContent(attr.name);
    map.infoWindow.show(pt);
};
showObj = function(index){
    var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
        12,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]),
            1
        ),
        new Color([255,0,0,1])
    );
    ftch.graphics[index].symbol = symbol;
    ftch.redraw();
    var pt = ftch.graphics[index].geometry;
    var font = new esri.symbol.Font();
    font.setSize("10pt");
    font.setWeight(esri.symbol.Font.WEIGHT_BOLD);
    var text = new esri.symbol.TextSymbol(ftch.graphics[index].attributes.name);
    text.setAlign(esri.symbol.TextSymbol.ALIGN_START);
    text.setFont(font);
    text.setOffset(2, -15);
    text.setColor(new dojo.Color([255,0,0,1]));
    var label = new esri.Graphic(pt, text);
    map.graphics.add(label);
};

自定义渲染

通过设置不同的渲染器，可以自定义要素在地图上的显示样式，使用UniqueValueRenderer根据某个字段的值来设置不同的符号：

var renderer = new UniqueValueRenderer(ftch, "类型");
renderer.addValue({value: "城市", symbol: citySymbol});
renderer.addValue({value: "乡村", symbol: villageSymbol});
renderer.addValue({value: "河流", symbol: riverSymbol});
ftch.setRenderer(renderer);

查询与过滤

支持对属性表的数据进行查询和过滤操作，可以使用QueryTask或IdentifyTask来实现查询功能：

var query = new Query();
query.where = "POPULATION > 10000";
query.outFields = ["CITY", "NAME", "POPULATION"];
query.outSpatialReference = map.spatialReference;
query.returnGeometry = true;
query.orderByFields = ["POPULATION DESC"];
queryTask.execute(query, showResults);

弹出框（Popup）

点击地图要素时显示详细信息的弹出框，可以为每个要素设置一个弹出框模板：

var template = new PopupTemplate({
    title: "{NAME}",
    content: "{POPULATION}"
});
ftch.setInfoTemplate(template);

编辑属性

允许用户编辑地图要素的属性信息，可以使用Editable或RelatedRecords来实现编辑功能：

var relatedRecords = new RelatedRecords({
    featureLayer: ftch,
    relatedUrl: "http://localhost:6080/arcgis/rest/services/shpchina/MapServer/1"
});
relatedRecords.on("load", function() {
    relatedRecords.show();
});

事件处理

为属性表添加各种交互事件，如选择、双击等：

dojo.connect(attributeTable, "onRowClick", function(evt){
    var selectedFeature = evt.feature;
    map.centerAt(selectedFeature);
});

导出数据

支持将属性表的数据导出为Excel或CSV文件：

function exportToExcel(data, filename){
    var csvContent = "data:text/csv;charset=utf-8," + data.map(e => e.join(",")).join("
");
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", filename + ".csv");
    document.body.appendChild(link); // Required for FF
    link.click(); // This will download the data file named "filename.csv".
}

集成其他组件

可以与其他ArcGIS for JavaScript组件结合使用，如Toolbar、Editable等：

var toolbar = new Toolbar({map: map});
toolbar.activate(Edit(EDIT_VERTICES));

问题2：如何实现属性表与地图的互动？

答：可以通过绑定鼠标事件来实现属性表与地图的互动，当鼠标悬停在地图要素上时显示名称并高亮显示，点击列表显示对象的信息框，具体实现可以参考上面的互动示例代码。

小伙伴们，上文介绍了“arcgis js 属性表”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。

如何利用ArcGIS JS API操作属性表？