Leaflet.draw 获取geoJSON的高度值

Question

我使用leaflet.js 和leaflet.draw 让用户绘制一个跋涉的地图。当用户为跋涉画一条线时，它只保存纬度和经度值，我在其他网站上看到（看起来它使用相同的 librers）他们也在保存高度值。我怎么也能做到？用户画完线后的代码：

map.on('draw:created', function (event) {
    var layer = event.layer,
        feature = layer.feature = layer.feature || {};
    feature.type = feature.type || "Feature";
    var props = feature.properties = feature.properties || {};
    drawnItems.addLayer(layer);
    map.removeControl(drawControl);
    $('#uploademap').attr('style', 'display:none;');
    var str = JSON.stringify(drawnItems.toGeoJSON()).toString();
    var hasil = $('#treck_leafletMap').val(str.substring(str.indexOf("coordinates") + 13, str.length - 4));
});

此外，在同一个网站上，他们在画布上绘制了高度图，并获得了路线的总爬升、下降和距离。 我现在使用鞋子高度图leaflet.heightgraph，但我不希望它出现在地图上，我希望它像指定网站一样出现在其他画布上。 知道该怎么做吗？

leaflet.heightgraph 的代码：

var hg = L.control.heightgraph();
    hg.addTo(mymap);
    hg.addData(FeatureCollections);

Answer 1

在 draw:created 事件中调用海拔 api 以获取图层每个点的高度。

map.on('draw:created', function (event) {
    var layer = event.layer;
    var props = feature.properties = feature.properties || {};
    props.attributeType = 0; 
    getAltitude(layer);
...
});

从 api 获取数据：

function getAltitude(layer){
    if(layer.getLatLngs){
    var urls = [];

    layer.getLatLngs().forEach((ll)=>{
            urls.push('https://APIURL/?points='+ll.lat+','+ll.lng); //No free api!
    })

    Promise.all(urls.map(url =>
            fetch(url).then(response => response.json())
    )).then(json=> {
      var latlngs = [];
      layer.getLatLngs().forEach((ll, idx)=>{
        ll.alt = json[idx].data[0];
        latlngs.push(ll);
      })
      layer.setLatLngs(latlngs);
      console.log(layer.getLatLngs())
        map.fire('dataloaded');
    })
  }else{
    var ll = layer.getLatLng();
    fetch('https://APIURL/?points='+ll.lat+','+ll.lng).then(response => response.json()).then(josn => {
        ll.alt = josn.data[0];
            layer.setLatLng(ll);
        console.log(layer.getLatLng())
        map.fire('dataloaded');
    })
  }
}

获取数据后，更新高度图：

map.on('dataloaded',(e)=>{
        var geojson = drawnItems.toGeoJSON();
        geojson.properties = {"Creator": "OpenRouteService.org","records": 36, "summary": "suitability"}; 
        hg.addData([geojson]); 
})