Question

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

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

但是，我希望hide / show选项能够根据年份显示图层。所以我认为我可以像在sql中使用那样运算符（即＆＃39; 2006％＆＃39;或LIKE运算符）。看一些帖子很多人都会使用＆＃39; *＆＃39;在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

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

    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)

请告诉我您需要什么样的确切结果，以便我能为您提供更多帮助。

地图框js;隐藏并显示标签

1 个答案: