使用 Leaflet 显示地理文件的长度答案

【问题标题】：Display length of geo files with Leaflet使用 Leaflet 显示地理文件的长度
【发布时间】：2020-06-13 18:01:24
【问题描述】：

我正在尝试构建一个网页，我可以在其中放置文件（gpx、kml、geojson...），Leaflet 会在地图上显示路线，每个路线都有一个弹出窗口，其中包含其名称和长度公里。我设法做到了，除了长度......我的问题是草皮或便宜的尺子只接受几何形状来计算长度，我无法提取文件的几何形状来给它草皮。

这是我的代码：

const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
    for (file of fileList) {
        fileName = file.name
        extension = fileName.split('.').pop()
        var ObjectURL = URL.createObjectURL(file)
        var line = turf.lineString(ObjectURL)
        var length = turf.length(line, {units: 'meters'})
        var customLayer = L.geoJson(null, {
            onEachFeature(feature, layer)
            {layer.bindPopup('<p><b>' + fileName.replace(/\.[^/.]+$/, "") + '</b></p><p>' + length + '</p>')}
        })
        if (extension == 'kml') {
            omnivore.kml(ObjectURL, null, customLayer).addTo(mymap)}
        else if (extension == 'gpx') {
            omnivore.gpx(ObjectURL, null, customLayer).addTo(mymap)}
        else if (extension == 'csv') {
            omnivore.csv(ObjectURL, null, customLayer).addTo(mymap)}
        else if (extension == 'wkt') {
            omnivore.wkt(ObjectURL, null, customLayer).addTo(mymap)}
        else if (extension == 'geojson') {
            omnivore.geojson(ObjectURL, null, customLayer).addTo(mymap)}
    }});

这里的问题是ObjectURL不是geojson对象，所以我尝试了另一种方法，将omnivore.gpx的结果放在一个变量中：

if (extension == 'gpx') {
        layer_gpx = omnivore.gpx(ObjectURL).addTo(mymap)}
        var line = turf.getCoord(layer_gpx)
        var length = turf.length(layer_gpx, {units: 'meters'})
        L.geoJson(layer_gpx, {
            onEachFeature(feature, layer)
            {layer.bindPopup('<p><b>' + fileName.replace(/\.[^/.]+$/, "") + '</b></p><p>' + length + '</p>')
        }})

它仍然给出错误“没有有效的坐标”。谢谢！

编辑：我自己找到的！

var customLayer = L.geoJson(null, {
            onEachFeature(feature, layer)
            {layer.bindPopup('<p><b>' + feature.properties.name + '</b></p><p>'+ turf.length(feature.geometry, {units: 'kilometers'}) + ' km</p>')}
        })

【问题讨论】：

很高兴自己找到了解决方案！ :-) 请考虑将其作为答案在下方发布并接受，以便人们知道您的问题已得到解决。
感谢您的提示，我还不知道 SO 的所有用途！

标签： javascript leaflet geospatial turfjs

【解决方案1】：

我自己找到的，这里是我使用的完整代码：

const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);

    for (file of fileList) {
        fileName = file.name
        extension = fileName.split('.').pop()

        var ObjectURL = URL.createObjectURL(file)       

        var customLayer = L.geoJson(null, {
            onEachFeature(feature, layer)
            {layer.bindPopup('<p><b>' + feature.properties.name + '</b></p><p>'+ turf.length(feature.geometry, {units: 'kilometers'}) + ' km</p>')}
        })      

        if (extension == 'kml') {
            omnivore.kml(ObjectURL, null, customLayer).addTo(mymap)}

        else if (extension == 'gpx') {
            omnivore.gpx(ObjectURL, null, customLayer).addTo(mymap)}

        else if (extension == 'geojson') {
            omnivore.geojson(ObjectURL, null, customLayer).addTo(mymap)}

    }});

我放弃了 csv 和 wkt 格式，因为它们不符合 feature.geometry 要求，而且我并不真正需要它们。

【讨论】：