Как добавить только первые 50 элементов списка из очень большого массива geojson на боковую панель вместо всех

#javascript #json #mapbox #geojson

#javascript #json #mapbox #geojson

Вопрос:

У меня есть очень большой файл мест geojson (1000 в настоящее время), по которому я сортирую их, используя turf.js чтобы найти их расстояния от точки на карте (которая запускается геокодером). Это работает, однако я намерен добавить результаты отсортированных мест по расстоянию на боковую панель, и из-за большого количества мест (много вычислений) загрузка занимает много времени. Это текущий код:

[places = исходный файл geojson, содержащий всю информацию]

         geocoder.on('result', function(ev) {
    
                                        var searchResult = ev.result.geometry;
    
                                        var options = { units: 'miles' };
    
                                        //GIVES EACH PLACE A DISTANCE VALUE
                                        places.features.forEach(function(place) {
                                            Object.defineProperty(place.properties, 'distance', {
                                                value: turf.distance(searchResult, place.geometry, options),
                                                writable: true,
                                                enumerable: true,
                                                configurable: true
                                            });
                                        });
    
                                        //GIVING EACH PLACE A VALUE IN ORDER OF CLOSEST TO FURTHEST
                                        places.features.sort(function(a, b) {
                                            if (a.properties.distance > b.properties.distance) {
                                                return 1;
                                            }
                                            if (a.properties.distance < b.properties.distance) {
                                                return -1;
                                            }
                                            return 0; // a must be equal to b
                                        });
    
    
                                        var listings = document.getElementById('listings');
                                        while (listings.firstChild) {
                                            listings.removeChild(listings.firstChild);
                                        }
(the functions below go here)
  

(пытаюсь создать новый меньший набор мест для размещения в функциях ниже — вместо использования всего файла ‘places’)

 //THIS FUNCTION ADDS THE SORTED PLACES TO THE SIDEBAR
                                        buildLocationList(places);
                                        createPopUp(places.features[0]);
                                        }); 
  

Итак, по сути, я пытаюсь создать новый список мест, который хранится локально в зависимости от результата геокодера, который намного меньше, чем общий файл geojson ‘places’ (возможно, содержащий 50 ближайших мест вместо каждого отдельного). Из этого создается функция, которую я могу передать в функцию buildLocationList, которая добавляет их на боковую панель.

Любая помощь была бы высоко оценена (:

Ответ №1:

Попробуйте добавить localStorage.setItem('TopFiftyPlaces', JSON.stringify(places.slice(49))); после сортировки мест.

Эта строка кода берет первые пятьдесят элементов places, а затем сохраняет их в локальном хранилище.

Чтобы извлечь сохраненный массив, вы можете поступить следующим образом:

const topFiftyPlaces = JSON.parse(localStorage.getItem('topFiftyPlaces'));

Затем вы можете передать topFiftyPlaces переменную вместо places в buildLocationList следующим образом: buildLocationList(topFiftyPlaces);