React调用OSM接口用osmtogeojson转换时报length属性未定义错误

你遇到的Cannot read properties of undefined (reading 'length')报错，根源是传给osmtogeojson的入参不符合要求：

• Fetch请求返回的res是原始HTTP响应对象，不是osmtogeojson可处理的OSM结构化数据，内部方法读取数据数组的length属性时找不到对应字段，直接抛错
• 你调用的OSM地图接口默认返回XML格式数据，你没有做响应解析就直接传值，会让库误走Overpass JSON格式的处理分支，进一步触发类型不匹配的问题

• 先检查接口请求状态：查看控制台有没有跨域报错，接口返回的HTTP状态码是否为200，拼接的bbox参数格式是否正确
• 打印传入osmtogeojson的参数，确认不是原始Response、undefined这类无效值
• 确认接口返回的数据格式，对应做解析处理后再传入转换方法

你需要先把接口返回的XML文本解析成DOM文档，再传给osmtogeojson做转换，同时补上返回值：

const url = 'https://www.openstreetmap.org/api/0.6/map';

const getRequestData = async (values) => {
  const res = await fetch(
    `${url}?bbox=${values.left},${values.bottom},${values.right},${values.top}`
  );
  // 读取响应的XML文本
  const xmlText = await res.text();
  // 解析为XML DOM对象
  const osmDom = new DOMParser().parseFromString(xmlText, 'text/xml');
  // 传入转换得到GeoJSON
  const geoJsonResult = osmtogeojson(osmDom);
  return geoJsonResult;
};

export default getRequestData;

• 你当前调用的OSM原生接口对bbox范围有限制，请求的区域面积不能超过0.25平方度，否则会返回400错误
• 原代码没有return转换后的结果，外部调用getRequestData时拿不到最终的GeoJSON数据，修复后可以直接用await getRequestData(xxx)接收结果
• 如果需要请求更大范围的OSM数据，可以替换为Overpass API，支持返回JSON格式数据，解析流程更简单

内容的提问来源于stack exchange，提问作者Esraa Saad