d3 纬度/经度点与地图不对齐

问题描述

我有一个适用于布鲁克林的 GeoJSON，并且能够正确地绘制自治市镇。然后我为建筑物所在的点添加圆圈。

点和地图不对齐。建筑物显示在地图上方。如下图所示，黑点是建筑位置，地图在下方。

我已确保所有经纬度都在布鲁克林范围内。

知道我在这里不做什么吗？

https://jsfiddle.net/w1x79ykm/4/

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}`);

// New Projection calc
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;

      // sanity check before adding to our dataset
      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]
        );

      // Draw the map
      mapsvg
        .append("g")
        .selectAll("path")
        .data(boroughs.features)
        .enter()
        .append("path")
        .attr("fill","lightgray")
        .attr("d",d => path(d))
        .style("stroke","black");

      // Add circles:
      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];   // Fudge to make this work. BUGBUG  - 370
        })
        .attr("cy",])[1];  // Fudge to make this work. BUGBUG + 1100
        })
        .attr("r",1)
    });
  });
}
loadDataAndShow();

解决方法

只是糟糕的数据。修正了数据，所有的画都很棒！

geojson mercator