d3.geo.tile点对点路径未显示宽度变化

时间:2018-03-14 16:30:55

标签: javascript d3.js d3.geo openmaptiles

我一直关注this block example将节点和路径显示为地标和道路。我已经成功加载了地图,并且我能够放大到“街景”级别。我也按照示例成功添加了节点。

然而,我的问题是我的路径大多是直接的PointA-to-PointB路径。在添加地图之前,我一直在将它们实现为M(sourcex),(sourcey)L(targetx),(targety)。现在,除非宽度设置为完全0.9 / zoom.scale(),否则路径将不会显示,这对我不起作用。我需要根据数据改变宽度的路径,但即使稍微改变0.9到1,路径也会再次消失。我不确定是不是因为地图的缩放,但无论我在哪个缩放级别,路径都不再出现了。

我尝试手动编辑example中的路径进行比较。从M(sourcex),(sourcey)L(target1x),(target1y)L(target2x),(target2y)...M(sourcex),(sourcey)L(target1x),(target1y),路径也消失了。 (编辑:在mbostock's example上尝试使用相同的结果。)

我找到了一种解决方法,我在路径M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)中复制了目标。我可以更改这些路径的笔触宽度,但是当我添加箭头标记时,箭头会偏斜。

这是一个证明我的问题的方法:https://jsfiddle.net/mxzepdap/33

jsfiddle上有两条路径:

路径1:正常M(sourcex),(sourcey)L(targetx),(targety)

  • 除非stroke-width正好是0.9 / zoom.scale()
  • ,否则不会显示
  • 箭头指向正确的方向

路径2:重复M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)

  • 显示设置宽度的路径
  • 箭头可能由于路径上的重复点而倾斜。箭头对我正在做的事情至关重要,所以这是一个很大的问题。 :(

您可以使用渲染上方的2个按钮切换路径宽度。

我见过的大多数例子都不是点对点路径,也没有放大到街景水平,所以我真的迷失了。非常感谢任何帮助。

0 个答案:

没有答案