循环遍历开放图层要素对象数组

Question

我有一个开放层特征对象的数组，如下所示：

import Feature from 'ol/Feature';
const Data = [ 
new Feature({ "ID": 101, "NAME": "ABC" }), 
new Feature({ "ID": 102, "NAME": "XYZ" })
];
//looping through
<ListGroup>
{Data.map(function(name, id){
return (<ListGroup.Item action href="" key={id}>{name.NAME}</ListGroup.Item>)
})}
</ListGroup> 

我得到空列表元素，无法获取 NAME 属性值。

Answer 1

使用new Feature({})构造函数创建功能时，它看起来不太像放入构造函数中的属性对象。传递到新要素的属性将存储在该要素的values下。

ol-feature的完整属性可以通过feature.getProperties()单个值可以通过feature.get(key)

在您的示例中，您将第一个参数命名为nameData.map，这实际上是特征。这有点令人困惑，我认为feature或类似的东西会是一个更清晰的变量名称。

若要获取该要素值，请调用name.get('NAME')(如果决定重命名参数，则调用feature.get('NAME')(

此外，Array.map的第二个参数是数组中的索引，因此在您的情况下，这将为您提供0和1，如果这些是您想要的值，那很好。如果要获取 ID，可以通过调用name.get('ID')或feature.get('ID')来访问这些值(见上文(。我想我应该提到OpenLayers-Functionsfeature.setId()和feature.getId()，只是为了完成。

TL;博士

尝试name.get('NAME')而不是name.NAME并检查结果

Answer 2

改用这个(删除双引号(：

new Feature({ ID: 101, NAME: "ABC" }), 
new Feature({ ID: 102, NAME: "XYZ" })