在传单上实时显示本地 .txt 文件答案

【问题标题】：Display local .txt file on leaflet realtime在传单上实时显示本地 .txt 文件
【发布时间】：2021-01-06 19:21:42
【问题描述】：

我是 JS 和 Leaflet 的新手，我正在尝试使用 Leaflet-Realtime 显示本地 .txt 文件，但没有成功。

我知道我必须将我的 .TXT 文件转换为 GEOJSON 才能读取它。

文件格式：

没有标题。
只需要第 4 列和第 6 列

-1  06/10/2020  08:35:43    45.72125602 N   11.363634   E   198.2   M   4
-1  06/10/2020  08:35:44    45.721256   N   11.36363403 E   198.19  M   4
-1  06/10/2020  08:35:45    45.72125598 N   11.36363402 E   198.19  M   4
-1  06/10/2020  08:35:46    45.72125596 N   11.36363401 E   198.2   M   4
2   06/10/2020  08:35:50    45.72125595 N   11.3636341  E   198.2   M   4

目前我尝试的是在脚本中编写 GEOJSON 以便能够显示它，但它不起作用：

var map = L.map('map', {
    minZoom: 1,
    maxZoom: 30,
    rotate: true
}).setView([45.64364529, 10.20162995], 17);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=H8dFchQ0uLgjRY4sSXUK', {
    attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
}).addTo(map);

var latlngs = {
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [ 45.64172279, 10.19579398],
            [ 45.64193714, 10.1958776],
            [ 45.64220345, 10.19598908],
            [ 45.6423983, 10.19606341],
            [ 45.6429504, 10.19632354],
            [ 45.64329464, 10.19658367],
            [ 45.64341805, 10.19758703],
            [ 45.64339856, 10.19838601],
            [ 45.64313876, 10.1987855],
            [ 45.64244377, 10.19869259],
            [ 45.6418527, 10.19879479],
            [ 45.6415669, 10.19715967],
            [ 45.64170331, 10.19648147],
            [ 45.64189167, 10.19615631]
        ]
    },
    "type": "Feature",
    "properties": {}
};

// Real Time
L.realtime({
    latlngs,
    crossOrigin: true,
    type: 'json'
}, {
    interval: 60 * 1000,
    start: false
});

【问题讨论】：

为什么你认为你需要传单实时插件来加载你的数据？还有什么让您认为需要将数据转换为 GeoJSON？
您好，感谢您的帮助。对于我一直在搜索的内容，我发现的两个选项是 Leaflet-realtime 或 Leaflet.liveupdate。如果你知道其他更好更简单的方法，你能分享一下吗？此外，我确实找到了有关如何在传单上显示 .txt 文件的任何信息。感谢您的帮助。
好的，但是使这些插件之一适合的用例的具体细节是什么？您的“本地 .txt 文件”是在服务器上还是在用户的机器上（即客户端）？是在外部自动修改的吗？以及如何显示数据？您似乎构建了一条由所有点组成的折线？
Exaclty，对不起，我意识到我需要提供更多细节哈哈。它来自外部自动修改的本地机器。

标签： javascript leaflet real-time

【解决方案1】：

对于寻找答案的未来用户：

我最终使用了 Leaflet 插件“Leaflet.Liveupdate”，并且非常适合我。

L.control.liveupdate ({
    update_map: function () {
        ...
    },
    position: 'topleft'
})
.addTo(map)
.startUpdating();

将文件解析成数组：

                getData();
                async function getData() {


                    const response = await fetch('file.txt');
           
                    // console.log(response);
                    const data = await response.text();

                    const table = data.split('\n').slice(1);
                    table.forEach(row => {

                        const out = []
                        table.forEach(row => {
                            const colums = row.split('\t');
                            const lat = colums[3];
                            const lng = colums[5];
                            out.push([lat, lng]);
                        });

完整代码：

L.control.liveupdate({
            update_map: function() {
                getData();
                async function getData() {


                    const response = await fetch('file.txt');

                    // console.log(response);
                    const data = await response.text();

                    const table = data.split('\n').slice(1);
                    table.forEach(row => {

                        const out = []
                        table.forEach(row => {
                            const colums = row.split('\t');
                            const lat = colums[3];
                            const lng = colums[5];
                            out.push([lat, lng]);
                        });

                        // console.log(out)
                        var latlng = [
                            out
                        ];

                       var polyline = L.polyline(latlng, {
                            color: 'rgba(0,0,0,0)',
                            // color: 'red',
                            weight: 10
                        }).addTo(map);

                    })



                }
            },
            position: 'topleft',
            interval: 500 //10000 = 1 seg
        })
        .addTo(map)
        .startUpdating().stopUpdating();

});

【讨论】：