这是 my other one 的后续问题.
http://fiddle.jshell.net/zw8TR/16/
我已经成功地利用 d3 来可视化 map 标记之间的路线。我用过this example由迈克·博斯托克 (Mike Bostock) 作为指导。
我使用 d3 而不是 Polyline 中内置的 Leaflet 的原因是因为我想尝试使用 d3 的插值来平滑某些路线,并为其他路线创建弧线(用于飞行路线)。 在现阶段,我只是想找到一种方法让这些方法适用于所有路线。
我见过的例子只使用interpolate()
方法 d3.svg.line()
,而 Leaflet 集成要求我使用 d3.geo.path()
。我的代码中是否有地方可以将此方法与 d3.geo.path()
一起使用?
另一个可能helpful link .
和another .
感谢您的帮助。
最佳答案
这样做比使用 d3.geo.path 有点困惑,因为它已经实现了 map 所需的所有样板功能,但这当然是可能的。这个想法是从地理路径中提取用户坐标列表,并将其转换为 line
函数中的屏幕坐标。此转换可以在该行的 .x()
和 .y()
函数中完成。
var path1 = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).x; })
.y(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).y; });
现在我们只需要从特征中提取坐标即可。
feature.attr("d", function(d) { return path1(d.geometry.coordinates); });
完整示例 here .
关于javascript - 在传单中使用 d3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21212870/