Question

我目前正在开发一个项目，该项目使用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;">

希望它有助于找到解决方案，这里是地图生成代码：

const svg = d3.select(`#${chartId}`)
    svg
    .append("svg")
    .attr("width", width / 2).attr("height", height / 2)

  var center = d3.geo.centroid(salzburg)
  var scale  = 1;
  var offset = [width / 2, height / 2];
  var projection =
    d3.geo.mercator()
      .scale(scale)
      .center(center)
      .translate(offset);

  // create the path
  var path = d3.geo.path().projection(projection);

  // using the path determine the bounds of the current map and use
  // these to determine better values for the scale and translation
  var bounds  = path.bounds(salzburg);
  var hscale  = scale * width  / (bounds[1][0] - bounds[0][0]);
  var vscale  = scale * height / (bounds[1][1] - bounds[0][1]);
  var scale   = (hscale < vscale) ? hscale : vscale;
  var offset  = [width - (bounds[0][0] + bounds[1][0]) / 2.1,
    height - (bounds[0][1] + bounds[1][1]) / 2.4];

  projection = d3.geo.mercator().center(center)
    .scale(scale).translate(offset);
  path = path.projection(projection);

  svg.append("rect").attr('width', width).attr('height', height)
    .style('stroke', 'black').style('fill', 'none');

  svg.selectAll("path").data(salzburg.features).enter().append("path")
    .attr("d", path)
    .style("fill", "red")
    .style("stroke-width", "1")
    .style("stroke", "black")

redCrossLocations看起来像这样：

"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
    }
  },
...

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

Answer 1

首先，在搜索从redCrossLocations获取的详细信息时，它似乎是从此source下载的。检查完整文件会发现地理输入数据存在两个问题：

您的JSON似乎是Esri的JSON format，而D3期望GeoJSON作为其输入。由于您的JSON与GeoJSON不兼容，因此您必须将其转换。
该文件的定义为"spatialReference":{"wkid":31258,"latestWkid":31258}，它指的是投影坐标系MGI_Austria_GK_M31（EPSG :: 31258），这对于D3来说也不是正确的。要使其可用于D3，您需要将其转换为地理坐标系WGS 84（EPSG :: 4326）。

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

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

另外，还有一个选项-s_srs可用于明确指定在您的情况下不需要的源坐标系（-s_srs "EPSG:31258"），因为这将从输入文件派生。

还有一个ogr2ogr web client可用于在线进行转换和转换。使用该表单，您可以上传文件并指定＆＃34;目标SRS＆＃34;是EPSG:4326，它将转换坐标系并将其转换为GeoJSON。

D3.js - 由于投影错误导致地图上的绘图点失效

1 个答案: