Javascript D3.js-由于投影错误，在地图上绘制点失败

我目前正在从事一个项目，该项目使用D3.js根据JSON文件中的地理数据绘制地图

现在我有了另一个JSON文件，其中包含位置，我想在地图上画出这些位置作为点

我的做法如下：

svg.selectAll('circle')
.data(redCrossLocations.features)
.enter()
.append('circle')
.attr('cx', function(d) {
  var x = d.geometry.x
  var y = d.geometry.y
  return projection([x.toString(), y.toString()])[0]
})
.attr('cy', function(d) {
  var x = d.geometry.x
  var y = d.geometry.y
  return projection([x.toString(), y.toString()])[1]
})
.attr('r', 10)
.attr('text',function(d) {
  return d.attributes.DienstSt
})
.style('fill', 'yellow')

但是当我看一看带有Firebug的圆圈时，这些圆圈有非常高的

cx

和

cy

值，这些值根本不符合地图坐标。因此，点在地图上不定位也不可见

这是使用Firebug调查html时的情况：

<svg id="chart-330a29bc-10a6-422f-b7a4-b79213e63a0f" viewBox="0 0 1700 850">
<g transform="">
<svg width="425" height="425">
<rect width="850" height="850" style="stroke: black; fill: none;">
<path d="M406.7479670817884,199.90340867304621L407.06008919224314,199.57933852526912L407.7100188308723,198.8568991193315L408.1015443102342,198.34893921523326L408.14613950961393,198.29087863446694L408.68509042962614,197.6062181990019L408.79620200385034,197.4452283080136L409.08485295673836,197.0327872268681L409.31646456821454,196.6144688478962L409.62291817269215,195.96797874850017L409.78145919928556,195.49428734522007L409.912011977608,194.9738064907906L409.986809685407,194.39973754590756L410.0058080374765,193.7122278...00837217,205.1538807821671L401.9104729365481,204.65327053784495L402.62461611946765,203.79979531967183L403.17787116003547,203.1799602826395L403.20639083074093,203.1993550356201L403.308689649577,203.08799997778988L403.42697542668066,202.95942665539405L403.5903878256004,202.78322302641755L405.8101836239257,200.80217267343687L405.8688615178462,200.74629337105216L405.89149125655877,200.7271611214237L405.95836191302715,200.66712537209605L406.1133158381808,200.52594198620864L406.3833670058257,200.28190447086672Z" style="fill: red; stroke-width: 1; stroke: black;">
<circle cx="189993884.995462" cy="-29942.633406634715" r="10" text="Salzburg Stadt" style="fill: yellow;">
<circle cx="186702567.5263016" cy="6214.613271863014" r="10" text="Lamprechtshausen" style="fill: yellow;">
<circle cx="191422937.49531066" cy="NaN" r="10" text="Mattsee" style="fill: yellow;">
<circle cx="196518708.70128453" cy="NaN" r="10" text="Straßwalchen" style="fill: yellow;">

---

有人知道，为什么我得到了这个绝对错误的点坐标吗？

首先，当搜索从您的

redCrossLocations

中获取的详细信息时，它似乎是从这里下载的。检查完整文件会发现您的地理输入数据存在两个问题：

您的JSON似乎是Esri的，而D3希望GeoJSON作为其输入。因为您的JSON与GeoJSON不兼容，所以必须对其进行转换

该文件定义了

“空间参考”：{“wkid”：31258，“latestWkid”：31258}

，该文件引用了投影坐标系（EPSG:：31258），在涉及D3时，该坐标系也不适合使用。要使其可用于D3，您需要将其转换为地理坐标系（EPSG:：4326）

幸运的是，您可以使用该工具在一次运行中进行两次转换：

ogr2ogr -f "GeoJSON" -t_srs "EPSG::4326" "RotesKreuz_Dienststellen.json"

此外，还有一个选项

-s\u srs

，用于明确指定源坐标系（

-s\u srs“EPSG:31258”

），该坐标系在您的情况下不需要，因为它将从输入文件派生

---

还有一个ogr2ogr可以在线进行转换和转换。使用该表单，您可以上传文件并将“目标SRS”指定为

EPSG:4326

，它将转换坐标系并将其转换为GeoJSON。

您的

redCrossLocations.功能是什么？为什么要对x和y值调用
.toString（）
？与实际问题无关，但对于
cx
和
cy
而言，您正在访问投影点的第一个元素，即访问返回数组的第一个值
[0]
，这就是为什么
cx
和
cy
具有相同值的原因。@altocumulus我现在添加了json；因为传递的位置是一个数字，我读到它必须是一个字符串，但它可能不会产生积极和消极的影响。@altocumulus谢谢你告诉我这一点，但这会让情况变得更糟，因为现在我不仅有高值，还有NaN值我们的JSON是JSON格式，与D3要求的GeoJSON不兼容。查看以下有关格式转换的问题：
"features": [{
    "attributes": {
      "OBJECTID": 1,
      "DienstSt": "Salzburg Stadt",
      "Art": "Bezirksstelle",
      "Ort": "Salzburg",
      "Strasse": "Sterneckstraße",
      "Hnr": "32",
      "Bezirk": "Stadt Salzburg und Flachgau",
      "Typ": null
    },
    "geometry": {
      "x": 429395.48199999984,
      "y": 296716.59500000067
    }
  }, {
    "attributes": {
      "OBJECTID": 2,
      "DienstSt": "Lamprechtshausen",
      "Art": "Ortsstelle",
      "Ort": "Lamprechtshausen",
      "Strasse": "Schulstraße",
      "Hnr": "1",
      "Bezirk": "Stadt Salzburg und Flachgau",
      "Typ": null
    },
    "geometry": {
      "x": 421963.38900000043,
      "y": 317197.9179999996
    }
  },
...

ogr2ogr -f "GeoJSON" -t_srs "EPSG::4326" "RotesKreuz_Dienststellen.json"