Как я могу присвоить содержимое файла Geojson переменной в Javascript?

Question

Показанный код уже работает, но я хочу его почистить.Он объявляет переменную с именем placez , которая содержит информацию в формате geojson для следующей части кода для считывания и загрузки на карту с использованием фильтров.Однако в действительности количество отображаемых точек превышает 50 000 (в примере здесь показано только 2).То, что я хочу знать, это как я могу просто загрузить данные, поступающие из файла в том же каталоге с именем placegj.geojson , где 50 000 записей данных будут записаны в формате geojson, в переменную placez вместо того, чтобы писать их там вручную, как в примере.Остальная часть кода опущена для аккуратности и не имеет значения для функциональности.Заранее спасибо!

var placez = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "icon": "theatre"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.038659, 38.931567]
        }
    }, {
        "type": "Feature",
        "properties": {
            "icon": "music"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.007481, 38.876516]
        }
    }]
};
map.on('load', function() {
    // Add a GeoJSON source containing place coordinates and information.
    map.addSource("placer", {
        "type": "geojson",
        "data": placez
    });
    placez.features.forEach(function(feature) {
        var symbol = feature.properties['icon'];
        var layerID = 'poi-' + symbol;

Answer 1

Это случай загрузки файла JSON в объект javascript. Это можно сделать в Pure Java Script, используя XMLHttpRequest.

 function loadJSONFile(callback) {   

    var xmlobj = new XMLHttpRequest();

    xmlobj.overrideMimeType("application/json");

    xmlobj.open('GET', 'placesgj.geojson', true); // Provide complete path to your json file here. Change true to false for synchronous loading.

    xmlobj.onreadystatechange = function () {
          if (xmlobj.readyState == 4 && xmlobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xmlobj.responseText);
          }
    };

    xmlobj.send(null);  
 }

вызов функции loadJSONFile путем передачи функции обратного вызова, как показано ниже:

loadJSONFile(function(response) {
    var placez = JSON.parse(response);
 });

// Продолжаем с вашим map.on ('загрузка', .. код здесь ...

Answer 2

Используйте Fetch API для чтения файла.

function fetchJSON(url) {
  return fetch(url)
    .then(function(response) {
      return response.json();
    });
}

Предполагается, что placesgj.geojson находится в том же каталоге:

var data = fetchJSON('placesgj.geojson')
            .then(function(data) { 

        // do what you want to do with `data` here...
        data.features.forEach(function(feature) {
                console.log(feature);
                var symbol = feature.properties['icon'];
                console.log(symbol);
            });

});