leaflet.draw 获取 geoJSON 的高度值

Question

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

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

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

leaflet.heightgraph的代码：

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

Answer 1

在 draw:created 事件中调用 elevation 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]); 
})

leaflet.draw 获取 geoJSON 的高度值

leaflet.draw get height value to geoJSON

leaflet

leaflet.draw