D3.js绘制布鲁克林地图时建筑经纬度点位与地图无法对齐问题求助

我有布鲁克林的GeoJSON数据，可以正确绘制该行政区地图，之后我添加圆形标记表示建筑点位。
但点位和地图无法对齐，建筑点全部显示在地图上方，如下图所示，黑点是建筑位置，地图在下方。
我已经确认所有经纬度都属于布鲁克林的坐标范围内，请问哪里存在疏漏？

最小复现代码如下：

import * as d3 from "d3";
import { ExtendedGeometryCollection, GeoGeometryObjects, GeoPermissibleObjects } from "d3";
import { Borough } from "./borough";
import { Building, The_Geom } from "./building";

var margin = { top: 20, right: 30, bottom: 30, left: 30 };
var width = 1260 - margin.left - margin.right;
var height = 1000 - margin.top - margin.bottom;

var mapSvg = d3.select("div#svg-container")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`);

// 初始化投影
var projection = d3.geoMercator()
var path = d3.geoPath(projection);

function loadDataAndShow() {
  d3.csv("brooklyn.csv").then((d) => {
    var buildings = new Array<Building>();
    d.forEach((building) => {
      var b = building as unknown as Building;
      b.geom = new The_Geom(b.the_geom);
      b.CNSTRCT_YR = +b.CNSTRCT_YR;
      b.HEIGHTROOF = +b.HEIGHTROOF;

      // 数据合法性校验
      if (b.CNSTRCT_YR > 1000 && b.HEIGHTROOF > 0) buildings.push(b);
    });

    d3.json("boroughs.geojson").then((data) => {
      var boroughs = data as Borough;

      projection
        .fitExtent(
          [[margin.left, margin.top], [width - margin.right - margin.left, height - margin.bottom - margin.top]],
          boroughs.features[0]
        );

      // 绘制底图
      mapSvg
        .append("g")
        .selectAll("path")
        .data(boroughs.features)
        .enter()
        .append("path")
        .attr("fill", "lightgray")
        .attr("d", d => path(d))
        .style("stroke", "black");

      // 绘制建筑点位
      mapSvg
        .append("g")
        .selectAll("dot")
        .data(buildings)
        .enter()
        .append("circle")
        .attr("cx", (d) => {
          return projection([
            d.geom.coordinates[0].longitude,
            d.geom.coordinates[0].latitude,
          ])[0];
        })
        .attr("cy", (d) => {
          return projection([
            d.geom.coordinates[0].longitude,
            d.geom.coordinates[0].latitude,
          ])[1];
        })
        .attr("r", 1)
    });
  });
}
loadDataAndShow();

问题原因及解决方案 #

按优先级排查以下两点即可解决错位问题：

1. 坐标参考系不匹配
   纽约官方公开的建筑数据默认使用EPSG:2263（纽约州平面坐标系，单位为英尺），不是WGS84经纬度（EPSG:4326）。你直接把平面坐标的数值当成经纬度传给墨卡托投影，是点位错位的最常见原因。
   解决方案：

• 导入数据前先将the_geom字段的坐标从EPSG:2263转换为EPSG:4326的经纬度格式
• 或直接将d3投影的坐标系改为对应EPSG:2263的投影，无需转换坐标

2. fitExtent参数配置错误
   fitExtent方法接收的是画布的绝对坐标范围，你当前传入的右下角范围计算错误，正确写法如下：

projection
  .fitExtent(
    [[margin.left, margin.top], [width + margin.left, height + margin.top]],
    boroughs.features[0]
  );

之前的写法把投影适配范围压得过小，会导致地图和点位的映射关系偏移。

3. 可选排查：确认The_Geom类返回的坐标顺序无误，传给projection的参数必须是[经度, 纬度]的顺序，不要和纬度在前的写法混淆。

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