javascript - map 框js；隐藏和显示标签

Question

我以前从未使用过 JavaScript。我正在尝试创建一个 map ，其中可以根据用户偏好隐藏不同的图层。我在 map 框中发现了有用的示例，显示了确切的代码 https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/ 。

现在，我的问题是，因为我有许多不同大小的点图层，所以我被迫创建多个图层并根据所需的属性对它们进行过滤，以便每个点的外观反射(reflect)特定的大小。但是，我希望将所有这些点组织成年份，因此我对图层进行了分组。所以我所有的图层名称看起来都是这样的(2006_mag2,2006_mag8,2010_mag3...)。

但是，我希望隐藏/显示选项能够根据年份显示图层。所以我想我可以做某种像我们在 sql 中使用的运算符(即“2006%”或 LIKE 运算符)。看看有些帖子很多人在 JavaScript 中使用“*”？ 所以这就是之前每个层的样子:

var toggleableLayerIds = [ '2006_mag2', '2010_mag3' ];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
}

这是我试图将多个层组合在一起的拙劣尝试:

var toggleableLayerIds = [ '2006.*', '2008.*' ];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
}

如果你们能够提供任何指导，我们将不胜感激。

Answer 1

您可以尝试使用带有正则表达式的循环来按日期对 LayerId 进行分组。抱歉，我更改了您的变量名称。这将为您提供一个带有按日期分组的 LayerId 的对象。

    var layerIds = [ '2006_mag2', '2010_mag3', '2006_mag8', '2006_mag1', '2008_mag2'];
    var dates = ['2006', '2010'];
    var groupedLayers = {};

    //init your object to have a member for each date
    //this could be done inside the loops below by testing if the array exists before pushing the matching layerId
    for (var i=0; i < dates.length; i++) {
      groupedLayers[dates[i]] = [];
    }
    
    //loop over your layerIds to match with the RegExp
    for (var i=0; i < layerIds .length; i++) {
        for (var j=0; j < dates.length; j++) {
            var searchPattern = new RegExp('^' + dates[j]);
            if (searchPattern.test(layerIds[i])) {
                groupedLayers[dates[j]].push(layerIds[i]);
            }
         }
    }

    console.log(groupedLayers)

请告诉我您需要什么具体结果，以便我可以为您提供更多帮助。