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

Question

我正在尝试构建一个可以放置文件（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>')
        }})

还是报错"No valid coordinates"。谢谢！

编辑：我自己找到的！

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

Answer 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 要求，而且我真的不需要它们。

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

Display length of geo files with Leaflet

javascript

leaflet

geospatial

turfjs