在单张中使用d3 [英] Using d3 in Leaflet

问题描述

这是我的其他人的后续问题。

http://fiddle.jshell.net/zw8TR/16/

我已经设法利用d3来显示我的地图标记之间的路线。我使用了Mike Bostock的此示例作为指导。

I have managed to utilise d3 to visualise the route between my map markers. I used this example by Mike Bostock as guidance.

我使用d3代替在Polyline中创建Leaflet的原因是因为我想要实验使用d3的插值来平滑一些路线，并为其他路线创建弧线。 在这个阶段，我只是想找到一种方法让所有路线都能正常工作。

The reason I'm using d3 for this instead of Leaflets built in Polyline, is because I'd like to experiment with d3's interpolation to smooth out some routes, and also create arc's for others (for flight routes). At this stage though, I'm just trying to find a way to get these to work for all routes.

只能使用 interpolate（）方法与 d3.svg.line（），而Leaflet集成需要我使用 d3.geo.path（）。在我的代码中有一个地方可以使用 d3.geo.path（）？

The examples I've seen only use the interpolate() method with d3.svg.line(), whereas the Leaflet integration requires me to use d3.geo.path(). Is there a place in my code where it's possible to use this method with d3.geo.path()?

另一个可能的实用连结。

并另一个。

感谢任何帮助。

推荐答案

这样做比使用 d3.geo.path ，因为它已经实现了地图所需的所有样板功能，但这当然是可能的。这个想法是从地理路径中提取用户坐标列表，并将它们转换为行函数中的屏幕坐标。这个翻译可以在 .x（）和 .y（） >

Doing this is a bit messier than using d3.geo.path because that already implements all the boilerplate functionality you need for maps, but it's certainly possible. The idea is to extract the list of user coordinates from the geo path and translate them to screen coordinates in the line function. This translation can be done in the .x() and .y() functions of the line.

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; });

现在我们只需要从特征中提取坐标。

Now we just need to extract the coordinates from the feature.

feature.attr("d", function(d) { return path1(d.geometry.coordinates); });

完成示例此处。

这篇关于在单张中使用d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！