如何使用 python 在传单地图上绘制轨迹？答案

【问题标题】：How to plot trajectories on a leaflet map using python?如何使用 python 在传单地图上绘制轨迹？
【发布时间】：2017-03-20 18:04:03
【问题描述】：

我正在处理如下所示的数据框。 x 和 y 是轨迹随时间变化的 墨卡托 x, y 坐标。具有相同 VoyageID 的行是属于同一轨迹的点。我们可以看到全为 0 的行分隔不同的轨迹。

        VoyageID      X             Y             Time
     27 2             -7.35857534   2.09175178     1.29471228
     28 2             -7.35863779   2.09167080     1.29471234
     29 2             -7.35882203   2.09156224     1.29471240
     30 2             -7.35908808   2.09147633     1.29471246
     31 2             -7.35941313   2.09134900     1.29471252
     32 2             -7.35970112   2.09123810     1.29471258
     33 0             0.0000000     0.0000000      0.0000000
     34 3             -7.34769342   2.09628155     1.29498270
     35 3             -7.34811254   2.09626864     1.29498282
     36 3             -7.34853711   2.09625315     1.29498288
     37 3             -7.34889255   2.09622732     1.29498294
     38 0             0.0000000     0.0000000      0.0000000
     39 4             -7.35857089   2.09176469     1.29531606
     40 4             -7.35862989   2.09169697     1.29531612
     41 4             -7.35869312   2.09162679     1.29531618
     42 4             -7.35876692   2.09158959     1.29531624
     43 0             0.0000000     0.0000000      0.0000000

我恳请建议我通过以下两种方式可视化这些轨迹的最佳方式：

如何在简单的二维线图上绘制 x、y 坐标？
如何在传单地图上绘制带有 x,y 坐标的轨迹（使用 Folium 或任何其他真实地图）？

另外，我如何管理不同轨迹的点（它们用 0 分隔）。我是 python 和 matplotlib 的新手，所以如果可能的话，请给我一些详细的答案。提前致谢。

【问题讨论】：

@roganjosh 对不起，我指的是地图上的 x、y 坐标，而不是时间元素。我已经编辑了问题。
这仍然是一个巨大的问题。 Leaflet 文档指定了如何将标记添加到地图 here，因此您只需将其放入 JS for 循环中，至少在基本层面上。
您需要决定使用哪个库。你说的是 JavaScript 的传单，但你用 python 标记了你的问题。也不清楚您是否需要背景中的真实地图或只是坐标图。时间的作用尚不清楚，因为地图上没有时间。
正如@ImportanceOfBeingErnest 所说的比我做得更好，这是一个 JS 库，但您在 Python 中进行了标记。就我而言，我正在尝试使用 Django 来传递数据，但您还没有说明您的设置是如何从 Python 到 JavaScript 的。你肯定低估了你在这里问的问题。
@ImportanceOfBeingErnest 很抱歉，让您感到困惑。我正在使用 python，我想我们可以使用 Folium 来处理传单地图。我想绘制轨迹，比如地图上连接这些点的点和线（你可以建议任何地图，而不仅仅是传单，我想要一张真实的地图），在第二次可视化中，我想用 x 显示一个简单的线图, y 坐标，没有时间。对于这个不清楚的问题，我真的很抱歉。

标签： python numpy leaflet geospatial folium

【解决方案1】：

您可以将数据框转换为 JSON 格式，任何 Javascript 映射库都可以轻松处理该格式。

例如使用 Pandas DataFrame.to_json 方法会转换此数据框：

voyage  id  x           y           time
27      2   -7.35857534 2.09175178  1.29471228
28      2   -7.35863779 2.09167080  1.29471234
29      2   -7.35882203 2.09156224  1.29471240

进入这个 JSON 数组：

[{
    "voyage": 27,
    "id": 2,
    "x": -7.35857534,
    "y": 2.09175178,
    "time": 1.29471228
}, {
    "voyage": 28,
    "id": 2,
    "x": -7.35863779,
    "y": 2.09167080,
    "time": 1.29471234
}, {
    "voyage": 29,
    "id": 2,
    "x": -7.35882203,
    "y": 2.09156224,
    "time": 1.29471240
}]

生成的文件可以通过 Javascript 加载并与 Leaflet 等映射库一起使用：

// Start a new map
var map = new L.Map('leaflet', {'center': [0, 0], 'zoom': 0});

// Load file 
fetch('data.json').then(function(response) {

    // Return JSON 
    return response.json().then(function (arr) {

        // Add a line
        var line = new L.Polyline([]).addTo(map);

        // Iterate the objects in the array
        arr.forEach(function (obj) {

            // If ID is not 0
            if (obj.id) {

                // Add point to line
                line.addLatLng(obj.y, obj.x);

            // ID is 0
            } else {

                // Start new line
                line = new L.Polyline([]).addTo(map);
            }
        });
    });
});

【讨论】：