无法使用JS Slider连接数据进行过滤

Question

我正在使用mapbox gl js starter code（下面的链接）并修改代码以适合我的数据。我已经成功地将我的本地文件“resi.geojson”数据显示在地图上，但是我无法连接“滑块”功能。有人可以帮我理解为什么滑块没有连接？实际滑块的“标签”都不起作用，我相信它可能在Filter中不匹配。

该示例使用“月”来过滤，我试图通过“年”属性过滤我的数据

https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/

我正在使用chrome并在rails上的ruby和localhost服务器上构建应用程序。控制台给我的唯一错误是“GET http://localhost:3000/jquery.min.js net :: ERR_ABORTED 404（Not Found）”并且没有进一步的信息。我已经查看了mapbox gl js API以及在线并努力连接点

//下面的html滑块

<label id='year'></label>
<input id='slider' type='range' min='2000' max='2005' step='1' value='2000'/>

//目标是按年过滤数据

var years = [
  2001,
  2002,
  etc
];

//创建按年过滤的功能。 'residential-circles'是拉入数据并应用样式的地图框数据对象的名称

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"
    },

//一些不相关的mapbox gl js代码用于map.addSource和map.addLayer resi.geojson来设置底层数据的样式。

//使用滑块UI执行过滤器

filterBy(2000);

document.getElementById('slider').addEventListener('input', function(e) {var year = parseInt(e.target.value, 10);
 filterBy(year);
 });

我希望能够像提供的mapbox示例一样使用滑块，但是当我移动滑块手柄并且控制台没有告诉我任何可以帮助我自行解决问题的任何事情都没有发生

当我使用错误的名称作为键来破坏过滤器时，例如，'resi-circles'显示所有信息，这意味着过滤器可能无法正常工作/消除任何数据，因此该功能允许我看到整个样式数据集

map.setFilter('resi-circles', filter);

当我输入正确的名称作为下面的键时，所有的样式和数据都会从地图中消失，这使我相信过滤器可能正在被激活，但'year'数据在某种程度上无法正确传递，因此布尔值正在评估我所有数据的“假”。只是一个猜测。

map.setFilter('residential-circles', filter);

非常感谢任何指示或帮助，你可以给我一个解决方案！

Answer 1

想通了，更像是一个mapbox问题。更新过滤器如下所示，geojson的'Year'区分大小写'Y'

var filter = ['<='，['number'，['get'，'Year']]，year];

mapbox代码需要下面的'number'行来获取.geojson数据

'circle-color'：['interpolate'，['linear']，['number'，['get'，'Units']]，1，'＃FCA107'，600，'＃7F3121']，

此示例还实现了类似的滑块功能，有助于交叉引用

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