如何从GeoJSON文件中提取国家名称并填充至select标签中

前置说明 #

不需要额外把整个GeoJSON转为数组，标准GeoJSON结构的features字段本身就是存储所有地理要素的数组，你直接操作这个字段即可。

完整操作流程 #

• 第一步：加载并解析GeoJSON文件
  如果你是通过网络请求获取，用fetch拉取后调用.json()解析即可；如果是本地静态文件，直接导入后拿到的就是可直接操作的JS对象。
• 第二步：提取所有国家名称（可选去重）
  国家名称一般存储在每个feature的properties字段下，根据你提供的GeoJSON结构示例，对应的字段大概率是name或者admin，提取后可以做一次去重处理避免重复选项：

  // 假设解析后的GeoJSON存在变量geoJsonData里
  const countryList = [...new Set(geoJsonData.features.map(item => item.properties.name))];
  

• 第三步：将国家名填充到select标签
  遍历拿到的国家名数组，生成option元素插入select即可：

  const selectElement = document.querySelector('select'); // 替换为你自己的select选择器
  countryList.forEach(country => {
    const option = document.createElement('option');
    option.value = country;
    option.textContent = country;
    selectElement.appendChild(option);
  });
  

字段不匹配排查方案 #

如果拿不到对应值，你可以打印单个feature的properties字段确认国家名对应的真实key：

console.log(geoJsonData.features[0].properties)

在输出结果里找到存储国家名称的字段名，替换上面代码里的name即可。

内容的提问来源于stack exchange，提问作者K.N.