如何用List.js从OpenLayers的GeoJSON嵌套对象生成指定格式列表？

云原生阿岚

2026-6-28

解决方法

你遇到的问题是List.js默认不支持直接引用嵌套在properties里的字段，所以直接用点/方括号写法无效。下面提供两种可行的实现方式：

方法一：先转换数据（推荐）

先把GeoJSON数据里嵌套的zona和nome提取到根层级，让List.js能直接识别字段：

HTML结构

<!-- 列表容器 -->
<div id="zone-list">
  <ul class="list"></ul>
</div>

JavaScript代码

// 你的原始GeoJSON数据
var json_2 = [ 
  {"properties": { "zona": "Italia", "nome": "A"} }, 
  {"properties": { "zona": "Italia", "nome": "I" } } 
];

// 转换数据：提取需要的字段到根层级
var processedData = json_2.map(item => ({
  zona: item.properties.zona,
  nome: item.properties.nome
}));

// 初始化List.js
var listOptions = {
  valueNames: ['zona', 'nome'], // 对应转换后的数据字段
  item: '<li><span class="zona"></span> - <span class="nome"></span></li>' // 列表项模板
};

new List('zone-list', listOptions, processedData);

方法二：自定义列表项渲染函数

无需转换数据，直接通过List.js的自定义item函数渲染嵌套字段：

HTML结构

和方法一相同，只需保留列表容器即可。

JavaScript代码

// 你的原始GeoJSON数据
var json_2 = [ 
  {"properties": { "zona": "Italia", "nome": "A"} }, 
  {"properties": { "zona": "Italia", "nome": "I" } } 
];

// 初始化List.js，用函数生成列表项
var listOptions = {
  item: function(data) {
    // 直接读取嵌套的properties字段拼接内容
    return `<li>${data.properties.zona} - ${data.properties.nome}</li>`;
  }
};

new List('zone-list', listOptions, json_2);