Question

我正在使用mapbox gl js入门代码（下面的链接）并修改代码以适合我的数据。我已经成功获取了本地文件“ resi.geojson”数据以显示在地图上，但是我无法连接“滑块”功能。有人可以帮助我了解为什么滑块未连接吗？实际的滑块上的“标签”都无法使用，我相信它在过滤器中可能不匹配。

该示例使用“ month”过滤，而我试图通过“ year”属性过滤数据

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

我正在使用chrome，并在Rails和localhost服务器上的ruby中构建应用程序。控制台给我的唯一错误是“ GET http://localhost:3000/jquery.min.js net :: ERR_ABORTED 404（未找到）”，没有进一步的信息。我在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
];

/// create函数按年份过滤。 “ 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"
    },

///与resi.geojson关联的map.addSource和map.addLayer无关的mapbox gl js代码，以对基础数据进行样式设置。

//使用滑块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);

当我按如下所示输入正确的名称作为关键字时，所有样式和数据都会从地图上消失，这使我相信过滤器可能已激活，但“年份”数据无法正确传递并且因此，布尔值对我的所有数据都评估为“假”。只是一个猜测。

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

非常感谢您的指导或帮助，您可以为我提供解决方案！

Answer 1

解决了这个问题，更多是因为地图框问题。更新了过滤器，如下所示，geojson的“年份”区分大小写“ Y”

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

mapbox代码需要下面的“数字”行才能获取.geojson数据

“圆形”：[ '插'， ['linear']， ['number'，['get'，'Units']]， 1，'＃FCA107'， 600，“＃7F3121” ]

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

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

无法使JS滑块与数据连接以进行过滤

1 个答案: