Загружать удаленный GeoJSON из URL синхронно - PullRequest
Новая
       24

Загружать удаленный GeoJSON из URL синхронно

0 голосов
/ 02 октября 2019

Я пытаюсь загрузить удаленный / внешний файл GeoJSON, содержащий FeatureCollection, из URL-адреса с помощью JavaScript, а затем выбрать только некоторые функции, которые в конечном итоге загрузятся на карту Leaflet. Я думаю, это должно быть просто, но явно нет ...

Методы, которые я пробовал:

  1. Использование leaflet-omnivore для загрузки GeoJSONфайл в объект GeoJSON. Казалось, что это неправильно загружало файл, так что я получил Invalid GeoJSON object ошибок.
  2. Использование jQuery + AJAX для загрузки файла GeoJSON в виде объекта JSON, как подробно здесь ;казалось, что это работает, насколько загрузка файла идет, но тогда я получаю [variable] is not defined ошибки, когда я пытаюсь взаимодействовать с объектом JSON позже. Я предполагаю, что это связано с асинхронной природой AJAX?
  3. Использование jQuery + getJSON для загрузки файла GeoJSON в виде объекта JSON, как подробно here ;Я столкнулся с теми же проблемами, что и с AJAX выше.

Как я могу загрузить этот файл GeoJSON таким образом, чтобы я мог продолжать манипулировать им как объектом?

Вот мой случай показа JavaScript (3): 

// Define URL path to geojson file containing FeatureCollection
var url = "https://blah.blah.geojson";

// Load geojson file as JSON object
$.getJSON(url, function(data) {
        // Turn JSON object into geojson object
        var geoJson_data = L.geoJson(data);
    });

// Create list of properties to filter by
var list_of_props = ['foo', 'bar', 'boop'];

// Define restriction to certain features
var data_filtered = L.geoJson(geoJson_data, {  // <- "geoJson_data is not defined" error occurs here
    filter: function(feature, layer) {
        if (feature.properties) {
            return feature.properties.foo in list_of_props;
        }
    }
});

// Ultimately I'd want to add the filtered data to a map like so...
data_filtered.add_To(previouslyDefinedLeafletMap);

1 Ответ

0 голосов
/ 02 октября 2019

Для всех методов, использующих вызов Ajax (например, getJSON), вы должны обрабатывать данные в методе обратного вызова.

Лучший способ написать свой код - это ... 

// Load geojson file as JSON object
$.getJSON(url, function(data) {
    processJSON(data);
});  

function processJSON(data) {
    // Turn JSON object into geojson object
    var geoJson_data = L.geoJson(data);

   // Define restriction to certain features
   var data_filtered = L.geoJson(geoJson_data, { 
     filter: function(feature, layer) {
        if (feature.properties) {
          return feature.properties.foo in list_of_props;
        }
     }    
 });

   // Ultimately I'd want to add the filtered data to a map like so...
   data_filtered.add_To(previouslyDefinedLeafletMap);
}
...