Polygon GeoJSON特征可在控制台加载但无法在Leaflet中显示

Hey there! 既然你已经能在控制台看到完整且结构正确的GeoJSON对象，那问题大概率出在Leaflet加载和渲染的环节上，而非GeoJSON数据本身。我来给你列几个最常见的排查方向，你可以逐一试试：

• 检查Leaflet的GeoJSON加载流程是否完整
  首先确保你已经正确初始化了地图实例，并且把底图图层添加到了地图上：

  // 初始化地图，替换成你需要的中心坐标和缩放级别
  const map = L.map('map-container').setView([39.9042, 116.4074], 10);
  // 添加OpenStreetMap底图
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  

  然后加载GeoJSON的时候，一定要记得调用.addTo(map)方法把图层挂载到地图上，这是新手最容易漏掉的步骤：

  // 假设你的GeoJSON数据存储在geojsonData变量中
  L.geoJSON(geojsonData).addTo(map);
  

• 验证坐标顺序是否匹配Leaflet要求
  GIS数据中常见的坐标顺序是[经度, 纬度]，但Leaflet默认遵循的是[纬度, 经度]的顺序。如果你的坐标顺序搞反了，多边形可能会跑到地图可视范围之外。
  你可以通过coordsToLatLng选项来转换坐标顺序：

  L.geoJSON(geojsonData, {
    coordsToLatLng: function(coords) {
      // 把[lon, lat]转换成[lat, lon]
      return new L.LatLng(coords[1], coords[0]);
    }
  }).addTo(map);
  

• 测试高对比度样式，排除视觉隐藏问题
  有时候多边形的填充色、边框色和底图颜色过于接近，导致肉眼看不到。你可以手动设置一个高对比度的样式来验证：

  L.geoJSON(geojsonData, {
    style: function(feature) {
      return {
        color: '#ff0000', // 显眼的红色边框
        fillColor: '#ffeb3b', // 亮黄色填充
        weight: 3,
        opacity: 1,
        fillOpacity: 0.6
      };
    }
  }).addTo(map);
  

• 让地图自动适配多边形范围
  即使多边形已经加载成功，如果地图视图没有聚焦到它的位置，你也看不到。可以在加载图层后调用fitBounds方法自动定位：

  const geoLayer = L.geoJSON(geojsonData).addTo(map);
  // 让地图自动缩放和平移到能看到整个多边形的范围
  map.fitBounds(geoLayer.getBounds());
  

• 检查控制台是否有隐性报错
  虽然你能打印GeoJSON数据，但加载图层时可能存在JavaScript语法错误或方法调用错误。打开浏览器开发者工具（F12）的Console标签，查看是否有红色错误提示，这些提示通常能直接定位问题。

你可以从这几个方向先排查，应该能很快找到问题所在。毕竟你已经搞定了GIS数据和Python部分，Web端的小问题很快就能解决的！

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