leaflet.draw получает значение высоты в geoJSON

Я использую 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));
});

Кроме того, на том же веб-сайте у них есть график высоты на холсте, и они получают общий набор высоты, спуск и расстояние маршрута. Сейчас я использую график высоты обуви leaflet.heightgraph, но я не хочу, чтобы он отображался на карте, я хочу, чтобы он отображался на другом холсте, как на указанном веб-сайте. Любая идея, как это сделать?

Код для leaflet.heightgraph:

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

leaflet leaflet.draw
person Community    schedule 13.05.2020    source источник
comment
Вы можете добавить высоту к объекту latlng L.latlng(49.5,-5.8,2) документы, но В листовке нет данных о высоте, поэтому для ее получения необходимо использовать внешние сервисы. И когда вы конвертируете слой в geojson, высота преобразуется в массив coordinates   -  person Falke Design    schedule 13.05.2020
comment
Я использую leaflet.draw, чтобы пользователь мог нарисовать маршрут. Это что вы имеете в виду под внешними услугами?   -  person    schedule 13.05.2020
comment
Нет, вам нужна служба, которая даст вам высоту / высоту точки. Они называются высотами, поэтому найдите elevation api, а затем загрузите для каждой точки высоту.   -  person Falke Design    schedule 13.05.2020
comment
Можете ли вы привести какой-нибудь пример? Это кажется немного сложным   -  person    schedule 13.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

вызовите в событии 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');
    })
  }
}

После получения данных обновите heightgraph:

map.on('dataloaded',(e)=>{
        var geojson = drawnItems.toGeoJSON();
        geojson.properties = {"Creator": "OpenRouteService.org","records": 36, "summary": "suitability"}; 
        hg.addData([geojson]); 
})
person Falke Design    schedule 13.05.2020
comment
попытался применить вашу идею в этой скрипке, похоже, не работает: jsfiddle.net/hgnLxvk8/ 7/#&вместеjs=r8S0lT9R1y - person ; 13.05.2020