如何在 Mapbox 中使用 getLayer 提取地图源 ID？

Question

这个问题与有关。

我的 Mapbox 地图中有一个按钮列表，以及一个 jQuery 函数来对它们的值进行排序并相应地向我显示特定图层。因为这部分交互是关于显示栅格地图的图层，所以我希望每个选择都有一个 fitBounds 事件。

我想知道我是否可以使用 getLayer 提取边界？由于它为每个给定层提供了一组属性，因此我需要提取源 link，然后可以将其与 getBounds 一起使用。但是怎么办？

这是我的代码。

$("#yearselect button").click(function(){
  var mapnum = $.text(this);
  if ($(this).hasClass("selected")) {
     $(this).removeClass("selected");
     map.setLayoutProperty(mapnum, "visibility", "none");
     basicreset(); // resets other filters
     yearreset(); // resets previous selections
    }
  else {
     $(this).addClass("selected");
     $("#yearselect button").not(this).removeClass("selected");
     $("#typeselect input").prop("checked", true);
     $("#yearselect button").each(function() {
       map.setLayoutProperty(($.text(this)), "visibility", "none");
       });
     map.setLayoutProperty("railway", "visibility", "visible");
     map.setLayoutProperty("railway case", "visibility", "visible");
     map.setLayoutProperty("sat", "visibility", "visible");
     map.setLayoutProperty(mapnum, "visibility", "visible");
     map.setFilter("vislis-1sep2017", ["none", [">=", "Opening date", mapnum],["<=", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setFilter("railway", ["none", [">", "Opening date", mapnum],["<", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setFilter("railway case", ["none", [">", "Opening date", mapnum],["<", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setPaintProperty("limits", "line-color", "#ffffff");
     document.getElementById('active-year').innerText = mapnum; // updates time slider
     document.getElementById('ranger').value = mapnum;  // moves time slider's range
     $("#resetslider").hide();
     }
   });

Answer 1

如果我的理解正确，您想要设置地图的视口以匹配给定图层的边界。您应该可以这样做：

map.fitBounds(map.getSource(map.getLayer('my-layer').source).bounds);

如何在 Mapbox 中使用 getLayer 提取地图源 ID？

How to extract map source id with getLayer in Mapbox?

javascript

jquery

mapbox

mapbox-gl-js