Возникли проблемы при подключении слайдера JS к данным для фильтрации - PullRequest
0 голосов
/ 14 апреля 2019

Я работаю с 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);

Большое спасибо за любые подсказки или помощь, которую вы можете дать мне для решения !!

1 Ответ

0 голосов
/ 19 апреля 2019

разобрался, это была скорее проблема с mapbox.обновленный фильтр, как показано ниже, а 'Year' из geojson чувствителен к регистру 'Y'

var filter = ['<=', ['number', ['get', 'Year']], year]; </p>

для кода mapbox требуется строка «число» ниже, чтобы получить данные .geojson

«цвет круга»: ['interpolate', ['linear'], ['number', ['get', 'Units']], 1, '# FCA107', 600, '# 7F3121'],

В этом примере также реализована аналогичная функция ползунка, и она была полезна для перекрестных ссылок

https://docs.mapbox.com/help/tutorials/show-changes-over-time/

...