【问题标题】:Export GPX file from Leaflet从 Leaflet 导出 GPX 文件
【发布时间】:2015-03-27 13:55:48
【问题描述】:

我想做的是让用户通过在 Leaflet 中选择一些 GeoJson 功能来创建 GPX 文件。我这样做的方式是创建一个新的 GeoJson 层来存储选定的特征,然后使用名为 togpx (https://github.com/tyrasd/togpx) 的插件将其转换为 gpx。现在我有一个gpx文件,但我不知道如何让用户下载它。有什么建议?这是我的代码:

var GPXfile;
var trails = new L.GeoJSON.AJAX('data/trasee.geojson', {
    onEachFeature: function(feature, layer) {
        layer.on({
            click: function () {
                var selectedGeojson = {
                  "type": "FeatureCollection",
                  "features": [
                    {
                      "type": "Feature",
                      "properties": {
                       "name": "Rocka Rolla"
                      },
                      "geometry": {
                        "type": "LineString",
                        "coordinates": feature.geometry.coordinates
                      }
                    }]
                }
                GPXfile = togpx(selectedGeojson);
            }
        })
    }
}).addTo(map);

JsFiddle 可能会有所帮助:http://jsfiddle.net/pufanalexandru/20ara4qe/1/

【问题讨论】:

    标签: export leaflet geojson gpx


    【解决方案1】:

    你可以试试……

    触发下载的链接:

    <a href="#" download="MyTracks.gpx" id="exportGPX">Export to file</a>
    

    一些javascript(你必须包括jquery):

    $("#exportGPX").on('click', function (event) {
    
            // prepare the string that is going to go into the href attribute
            // data:mimetype;encoding,string
            data = 'data:application/javascript;charset=utf-8,' + encodeURIComponent(gpxData);
    
            // set attributes href and target in the <a> element (with id  exportGPX)
            $(this).attr({
                'href': data,
                'target': '_blank'
            });
    
            // let the click go through
        });
    

    这里有一个例子:http://jsfiddle.net/FranceImage/vxe23py4/

    注意:它适用于 Chrome,但您也应该尝试其他浏览器。

    【讨论】:

    • 工作就像一个魅力,但是,考虑到我是一个 Javascript 菜鸟,你能解释一下这部分代码吗,请:'data:application/javascript;charset=utf-8,' + 编码URI组件(gpxData);或者只是给我一个链接,我可以阅读它
    • 目标是在处理点击之前编辑 href 和 target 属性。在 href 属性中,您可以放置​​一些数据(data:mimetype;encoding,string)。使用 encodeURIComponent 函数对字符串进行转义
    猜你喜欢
    • 1970-01-01
    • 2021-09-28
    • 1970-01-01
    • 2021-02-16
    • 2012-08-18
    • 2018-12-28
    • 1970-01-01
    • 2020-06-13
    • 2012-02-01
    相关资源
    最近更新 更多