Question

我需要使用svg画一条路。我将从谷歌地图获取道路的坐标。使用坐标，我在D3中绘制比例并绘制我们的道路。但由于某种原因，它显示不正确，不知何故颠倒了。我究竟做错了什么？谢谢您的帮助！

谷歌地图折线

我的svg gen 3d.js

代码

＆＃13;

      let width = 250;
      let height = 375;

      let json = {
    "type": "LineString",
    "coordinates": [[48.90532814533834, 24.680317370130183],
[48.883320688958634, 24.637144533826472],
[48.882530497570265, 24.636028734876277],
[48.88190962414936, 24.638088671399714],
[48.871002260895736, 24.66945519346757],
[48.868969814521975, 24.674519204087687],
[48.86778418267773, 24.67640747923417],
[48.867050206029084, 24.67743744749589],
[48.86637267956708, 24.67795243162675],
[48.86546929668142, 24.678810738511515],
[48.86445297144161, 24.679583214707804],
[48.8628155151407, 24.680269860215617],
[48.86066980165004, 24.681128167100383],
[48.85801576560714, 24.682072304673625],
[48.85575690067917, 24.683016442246867],
[48.85479685221879, 24.68370308775468],
[48.85231193541426, 24.686020516343547],
[48.850448166869896, 24.689110421128703],
[48.84813247900213, 24.69640602964921],
[48.84711580171843, 24.70438828367753],
[48.846438005394916, 24.70516075987382],
[48.845590747089275, 24.705246590562297],
[48.83384441590116, 24.70023211348473],
[48.8291415885976, 24.698462478144393],
[48.82654238705405, 24.696230880244002],
[48.82512972097189, 24.695115081293807],
[48.82377352406793, 24.694428435785994],
[48.822756352305085, 24.692969314081893],
[48.82083497153837, 24.689965239985213],
[48.81913957439901, 24.68850611828111],
[48.81716153859056, 24.687476150019393],
[48.81620075017718, 24.686446181757674],
[48.81443898628063, 24.684729567988143],
[48.80986069828892, 24.68155383251451],
[48.80717570530815, 24.679665557368025],
[48.80381219546943, 24.67880725048326],
[48.77989284642209, 24.67039901058888],
[48.777354631787716, 24.669543351419634],
[48.77611026798696, 24.668513383157915],
[48.77509212920691, 24.667483414896196],
[48.773734578713096, 24.66688260007686],
[48.772886091013035, 24.666367615946],
[48.77158504868879, 24.66465100217647],
[48.767568574926294, 24.663191880472368],
[48.76158563393699, 24.657331572784756],
[48.75106082711519, 24.651838408722256],
[48.74224825684646, 24.646860228790615],
[48.740635107152315, 24.646087752594326],
[48.73868227772552, 24.646345244659756],
[48.73732374294287, 24.646860228790615],
[48.73579534742594, 24.647546874298428],
[48.732652406087446, 24.646558163473628],
[48.72767033487528, 24.643897412130855],
[48.71895052242447, 24.638833401510738],
[48.71538289067956, 24.637460110495113],
[48.7107955637972, 24.632911084005855],
[48.70043006310887, 24.622439740011714],
[48.68751268172252, 24.61153924257519],
[48.6790819349596, 24.60447667336598],
[48.676644982797136, 24.603790027858167],
[48.67511474327954, 24.603360874415785],
[48.67392452485299, 24.603275043727308],
[48.67262092002776, 24.602588398219496],
[48.6650820219688, 24.597181064845472]]
};
      
      
      // Create a unit projection.
      let projection = d3.geo.mercator()
          .scale(1)
          .translate([0, 0]);
      // Create a path generator.
      let path = d3.geo.path()
          .projection(projection);
      // Compute the bounds of a feature of interest, then derive scale & translate.
      let b = path.bounds(json),
          s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
          t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
      // Update the projection to use computed scale & translate.
      projection.scale(s).translate(t);


      let svg = d3.select("#map").append("svg")
          .attr("width", width)
          .attr("height", height);

      svg.append("path")
          .datum(json)
          .attr("class", "graticule")
      .attr("d", path);

＆＃13;

    .graticule {
      fill: none;
      stroke: #ff646b;
      stroke-opacity: .5;
      stroke-width: 5px;
    }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Line</title>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

＆＃13;

Answer 1

您没有提到坐标的来源，但我怀疑它们是基于GIS（x，y，z）格式，所以订单是[longitude, latitude]。这将导致您的图像被“旋转” - 如果您反转x / y值，这应该有帮助。关于this SO thread上这些不同坐标系（导航与图形）的演变有很好的讨论。

此外，您生成的路径似乎是“垂直翻转”。我不能告诉你我做了多少次，因为页面的坐标系统不是我们大多数人所期望的。左上角为（0,0），y值增加向下页面。最直观的方法（对我来说）是反转y轴的输出范围 - 一种方式是这样的：

var yScale = d3.scale.linear()
    .domain([minY, maxY])
    .range([height, 0]);

这样，最小y坐标（即你的情况下的纬度）被映射到SVG区域的底部（“高度”变量），而最大值被映射到0（屏幕顶部））。

线条未正确显示d3.js geo和google maps

1 个答案: