Mapbox GL add json as источник данных

Question

В настоящее время я работаю над проектом, который включает Mapbox GL. Я получаю json-файл с сервера с тихими множеством точек местоположения. Этот файл имеет следующую структуру:

{"location": {"lat": 50.62914, "lon": 5.61972}} 

Теперь я хочу разместить их на слое в карточке. Проблема заключается в том, что mapbox поддерживает только GeoJSON. Поэтому я пытаюсь исправить это с помощью следующего обходного пути.

function updateMap(data) { 
    console.log("Updating map with " + data.length + " users"); 
    // Converting my json file into a Geojson format by returning type:point, coordinates for every json entry 
    data.forEach(function(d) { 
     return { 
      "type": "Point", 
      "coordinates": [d.location.lon, d.location.lat] 
     }; 
    }); 
}; 

Я не уверен, что это возможно, поэтому, пожалуйста, исправьте меня, если я ошибаюсь. Я думаю, что я должен вернуть его за пределы forEach, иначе я получу только первый результат.

Далее следует добавить этот файл geojson в качестве источника для этого слоя. Нечто, что выглядит следующим образом:

map.on('load', function() { 
    map.addSource('point', { 
     "type": "geojson", 
     "data": //need to add the points that I returned above here. 
    }); 

    map.addLayer({ 
     "id": "point", 
     "source": "point", 
     "type": "circle", 
     "paint": { 
      "circle-radius": 8, 
      "circle-color": "#000" 
     } 
    }); 
}); 

Только проблема, я не знаю, как получить все данные от возвращения в функции updateMap.

Спасибо за вашу помощь заранее! Надеюсь, это возможно.

С наилучшими пожеланиями,

Wouter

Answer 1

GeoJSON чрезвычайно чувствителен, когда речь идет о форматировании функции. Возможно, стоит использовать вместо «возврат», чтобы вывести каждое значение в массив.

function updateMap(data) { 
    var test = []; 
    data.forEach(function(d) { 
     test.push(JSON.parse('{"type": "Feature", "geometry": {"type": "Point", "coordinates": ['+d.location.lon+','+ d.location.lat+']}}')); 
    }); 
} 

Затем измените map.addSource выглядеть следующим образом:

map.on('load', function() { 
    map.addSource("point", { 
     "type": "geojson", 
     "data": { 
      "type": "FeatureCollection", 
      "features": test 
     } 
    }); 
    map.addLayer({ 
     "id": "point", 
     "type": "circle", 
     "source": "point", 
     "paint": { 
      "circle-radius": 8, 
      "circle-color": "#000" 
     } 
    }); 
}); 

Надеется, что это помогает.