WebGIS开发入门教程四: GeoJSON咋读?数据怎么解析?

你写的GeoJSON为啥总报错？可能是这3个坑没踩过

上周有个读者在后台留言：‘Dr. Gis，我照着教程把GeoJSON加载进Leaflet，地图一片空白，控制台还报错Uncaught TypeError: Cannot read property 'features' of undefined...’——别慌，这几乎是每个WebGIS新手必经的‘成人礼’。我在参与某智慧城市项目时，也曾在凌晨三点被类似问题折磨到怀疑人生。今天这篇，就是帮你把GeoJSON从‘玄学格式’变成‘透明积木’。

GeoJSON不是JSON的马甲，它是地理数据的乐高说明书

很多人以为GeoJSON就是加了坐标的JSON，就像给普通快递单贴个GPS标签——大错特错。它本质是一套严格的空间数据结构规范，就像乐高积木的拼装说明书：每个零件（点/线/面）都有固定卡槽（geometry.type），每组组件（feature）必须带属性清单（properties），整盒积木（FeatureCollection）还得有统一包装盒（type: 'FeatureCollection'）。

实战血泪教训：某次国土调查项目，我们收到第三方提供的‘GeoJSON’文件，打开发现geometry字段写成geometery——少了个r。结果前端地图渲染直接崩溃，排查了整整两天才定位到这个拼写错误。从此团队立下铁律：所有GeoJSON必须用geojsonlint.com在线校验！

三步拆解法：像外科医生一样解剖GeoJSON

面对动辄上万行的GeoJSON文件，别傻乎乎肉眼扫描。记住这个黄金公式：看骨架→查器官→验血液。

1. 看骨架（根节点结构）：顶级对象必须包含type和features两个字段，就像人体必须有脊椎和四肢。用浏览器开发者工具console.log(data)后，先确认data.type === 'FeatureCollection'。
2. 查器官（单个要素）：遍历features数组时，每个元素必须是标准feature对象——包含geometry（空间形态）和properties（属性表）。特别注意geometry.coordinates的嵌套层数：Point是[经度,纬度]，LineString是[[经1,纬1],[经2,纬2]]，Polygon还要再多包一层[]。
3. 验血液（坐标值合法性）：我见过最离谱的bug是坐标写成[120.5, 300.2]——纬度超过90度！用这段代码快速筛查：

   // 检查坐标范围是否合法
   features.forEach(feature => {
     const coords = feature.geometry.coordinates;
     if (feature.geometry.type === 'Point') {
       if (Math.abs(coords[1]) > 90) console.warn('纬度越界:', coords);
     }
   });

实战：用JavaScript把GeoJSON变成可交互地图

假设你拿到一个城市公园数据集，目标是在Leaflet上显示并点击弹出公园名称。核心就三行魔法：

// 1. 异步加载GeoJSON文件
fetch('parks.geojson')
  .then(response => response.json())
  .then(data => {
    // 2. 创建GeoJSON图层
    L.geoJSON(data, {
      // 3. 绑定点击事件
      onEachFeature: (feature, layer) => {
        layer.bindPopup(feature.properties.name);
      }
    }).addTo(map);
  });

但真实项目远比demo复杂。比如某商业分析系统需要动态过滤商场数据，这时就要活用L.geoJSON的filter参数：

L.geoJSON(data, {
  filter: function(feature) {
    // 只显示评分大于4星的商场
    return feature.properties.rating >= 4;
  },
  onEachFeature: (feature, layer) => {
    layer.bindPopup(`${feature.properties.name}
评分: ${feature.properties.rating}`);
  }
}).addTo(map);

避坑指南：那些年我们踩过的GeoJSON地雷

终极心法：把GeoJSON当对话对象而非数据尸体

GeoJSON解析的本质，是教会计算机理解人类的空间语言。下次遇到报错，别急着Google，先问自己三个问题：我的数据骨架完整吗？每个器官摆放正确吗？血液成分合格吗？这套思维框架，能让你在WebGIS开发中少走三年弯路。

你在解析GeoJSON时踩过什么奇葩的坑？或者有什么独门调试技巧？评论区留下你的故事——点赞最高的三位，送你《GeoJSON规范速查手册》电子版（含常见错误对照表）！