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

时间:2017-10-08 19:16:54

标签: javascript jquery mapbox mapbox-gl-js

此问题与previous question

有关

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

我想知道我是否可以使用getLayer提取边界?由于它为每个给定的层提供了一系列属性,因此我需要提取源链接,然后可以将其与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();
     }
   });

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您需要设置地图的视口以匹配给定图层的边界。你应该能够这样做:

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