循環通過開放層功能 object 陣列

Question

我有一組開放層功能 object 為：

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({ ID: 101, NAME: "ABC" }), 
 new Feature({ ID: 102, NAME: "XYZ" })

Answer 2

當使用new Feature({})構造函數創建特性時，它看起來與放入構造函數中的屬性對象不太一樣。 您傳遞給新功能的屬性將存儲在該功能的values下。

可以通過feature.getProperties()訪問 ol-feature 的完整屬性，可以通過feature.get(key)訪問單個值

在您的示例中，在Data.map中，您命名了第一個參數name ，這實際上是功能。 這有點令人困惑，我認為feature或類似的東西會是一個更清晰的變量名稱。

要獲得該特征值，請調用name.get('NAME') （或feature.get('NAME')如果您決定重命名參數）

此外， Array.map的第二個參數是數組中的索引，因此在您的情況下，這將為您提供0和1 ，如果這些是您想要的值，這很好。 如果您想獲取 ID，您可以通過調用name.get('ID')或feature.get('ID')來訪問這些值（見上文）。 我想我應該提到 OpenLayers-Functions feature.setId()和feature.getId() ，只是為了完成。

TL;博士

嘗試name.get('NAME')而不是name.NAME並檢查結果