Я работаю с mapbox gl js стартовый код (ссылка ниже) и изменяю код в соответствии с моими данными.Мне удалось получить данные локального файла «resi.geojson» для отображения на карте, однако я не могу подключить функцию «ползунок».Может кто-нибудь помочь мне понять, почему слайдер не подключается?Оба «ярлыка» фактического ползунка не работают, и я считаю, что он может не совпадать в фильтре.
В примере используется «месяц» для фильтрации, и я пытаюсь отфильтровать свои данные по «году»"property
https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/
Я использую Chrome и собираю приложение в ruby на рельсах и на сервере localhost.Единственная ошибка, которую выдаёт мне консоль: «GET http://localhost:3000/jquery.min.js net :: ERR_ABORTED 404 (Not Found)», и дальнейшая информация отсутствует.Я просмотрел API mapbox gl js, а также подключился к Интернету и изо всех сил пытался соединить точки
// html ниже для слайдера
<label id='year'></label>
<input id='slider' type='range' min='2000' max='2005' step='1' value='2000'/>
// Цель - отфильтровать данные по годам
var years = [
2001,
2002,
etc
];
// создать функцию для фильтрации по годам.'residential-circle' - это имя объекта данных mapbox, который извлекает данные и применяет стили
function filterBy(year) {
var filter = ['<=', 'year', year];
map.setFilter('residential-circles', filter);
// Установить метку ползунка для года
document.getElementById('year').textContent = years[year];
// Создатьзначение свойства года, основанное на времени, используемом для фильтрации.
data.features = data.features.map(function(d) {
d.properties.year = new Date(d.properties.year);
return d;
});
// выше, используемое для получения данных из данных resi.geojson, структурированных ниже:
{
"features": [
{
"type": "Feature",
"properties": {
"Status": "Complete",
"Project": "123 Fake Street",
"Year": 2018,
},
"geometry": {
"coordinates": [
-87.61961,
41.890696
],
"type": "Point"
},
"id": "00f64f2be217aa192cded76188dece01"
},
// некоторые несоответствующие mapboxgl js код для map.addSource и map.addLayer resi.geojson для стилизации базовых данных.
// выполнение фильтра с использованием пользовательского интерфейса ползунка
filterBy(2000);
document.getElementById('slider').addEventListener('input', function(e) {var year = parseInt(e.target.value, 10);
filterBy(year);
});
Я ожидаю, что смогуиспользуйте ползунок, как в приведенном примере с mapbox, но ничего не происходит, когда я перемещаю ручку ползунка, и консоль ничего не говорит мне, чтобы помочь устранить неполадки самостоятельно
Когда я нарушаю фильтр, используя неправильное имяв качестве ключа, например, «resi-кружки» отображает всю информацию, это означает, что фильтр, вероятно, не работает / не удаляет какие-либо данные, поэтому функция позволяет мне видеть весь наборf стилизованные данные
map.setFilter('resi-circles', filter);
Когда я введу правильное имя в качестве ключа, как показано ниже, все стили и данные исчезнут с карты, что наводит меня на мысль, что фильтр может быть активирован, но 'данные года как-то не проходят корректно, и, следовательно, логическое значение оценивается как «ложное» для всех моих данных.Просто предположение.
map.setFilter('residential-circles', filter);
Большое спасибо за любые подсказки или помощь, которую вы можете дать мне для решения !!