GeoJSON路径无法在墨卡托投影地图渲染的技术求助

我来帮你分析下路径无法渲染的几个常见原因，以及对应的解决办法：

1. SVG容器未设置明确的宽高 #

默认情况下，SVG元素的宽高可能很小（比如默认300x150），或者没有设置，导致投影后的路径直接超出了可视区域。你需要给SVG容器指定明确的宽高：

const width = 800;
const height = 600;
// 假设你是选择页面上的svg元素
const mapSelection = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

2. 投影未适配路径范围 #

D3的geoMercator()默认投影中心是[0, 0]（赤道附近），缩放比例也比较小，你的路径是芝加哥到洛杉矶的航线，默认投影下会完全偏离可视区域。你可以用fitExtent方法自动让投影适配你的路径，确保路径显示在SVG范围内：

const projection = d3.geoMercator()
  // fitExtent的第一个参数是可视区域的边距，第二个是你的GeoJSON数据
  .fitExtent([[20, 20], [width - 20, height - 20]], flightPath);

如果不想自动适配，也可以手动设置投影的中心和缩放比例：

// 计算路径的中心点坐标
const centerLon = (-87.6862308732 + -118.408500088) / 2;
const centerLat = (41.8372950615 + 34.1182277898) / 2;

const projection = d3.geoMercator()
  .center([centerLon, centerLat])
  .scale(1000); // 根据SVG大小调整缩放值，越大路径显示越清晰

3. 不必要的类型断言与缺失的填充设置 #

你的代码中attr("d", path as any)的as any断言其实是不必要的，TypeScript下如果类型报错，你可以确保导入了正确的D3类型定义，直接使用类型正确的路径生成器即可。另外，记得给路径设置fill: none，否则LineString会被默认填充成黑色块，掩盖航线效果：

const path = d3.geoPath().projection(projection);
// 直接使用path即可，无需断言
mapSelection.selectAll("path")
  // ...其他代码
  .attr("d", path)
  .attr("fill", "none");

完整修正后的示例代码 #

import * as d3 from "d3";

const flightPath = { 
  type: "FeatureCollection", 
  features: [ 
    { 
      type: "Feature", 
      geometry: { 
        type: "LineString", 
        coordinates: [ [-87.6862308732, 41.8372950615], [-118.408500088, 34.1182277898] ] 
      }, 
      properties: {} 
    } 
  ] 
};

const width = 800;
const height = 600;
const mapSelection = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

const projection = d3.geoMercator()
  .fitExtent([[20, 20], [width - 20, height - 20]], flightPath);
const path = d3.geoPath().projection(projection);

mapSelection
 .selectAll("path")
 .data(flightPath.features)
 .enter()
 .append("path")
 .attr("d", path)
 .attr("stroke", "black")
 .attr("stroke-width", "5px")
 .attr("fill", "none");

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