Javascript 将贴图动态绑定到可见覆盖

我在Rails应用程序中使用了传单JS，添加了标记，并将图层组和覆盖层用作“类别”。我寻找了一些关于如何基于可见（“选中”）覆盖层绑定/自动放大和缩小的示例和想法，但找不到太多

目前，我正在使用存储所有地图标记的标记数组，并使用标记数组绑定地图：

var group = L.featureGroup(markers); 
map.fitBounds(group.getBounds());

但我不确定如何根据地图上可见的覆盖标记动态更新边界。这就是我到目前为止所做的：

var markers = [];

// a sample of the map markers
var consulting = new L.LayerGroup();
  <% @maps.each do |consulting| %> 
    <% if consulting.category == "Consulting" %>

    markers.push( L.marker( [<%= raw consulting.latitude.to_json %>, <%= raw consulting.longitude.to_json %>]));

    L.marker( [<%= raw consulting.latitude.to_json %>, <%= raw consulting.longitude.to_json %>],  {icon: consultingIcon} )
        .bindPopup( 'hello')
        .addTo(consulting);
    <% end %>
  <% end %> 


var education = new L.LayerGroup();
  <% @maps.each do |education| %> 
    <% if education.category == "Education" %>

      markers.push( L.marker( [<%= raw education.latitude.to_json %>, <%= raw education.longitude.to_json %>]));

      L.marker( [<%= raw education.latitude.to_json %>, <%= raw education.longitude.to_json %>],  {icon: educationIcon} )
        .bindPopup( 'hello')
        .addTo(education);
    <% end %>
  <% end %> 

var mbAttr = '' +
  'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoidGVyZXNhc2hpaCIsImEiOiJjajU4cWFqNWgwMWgwMnFtazIycTJpbG51In0.4FH-NfH6b44wCc4BFodqWQ';

var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
  streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

var map = L.map('mapid', {
  center: [43.6532, -79.3832],
  zoom: 5,
  scrollWheelZoom: false,
  layers: [grayscale, consulting, education]
});

var baseLayers = {
  "Grayscale": grayscale,
  "Streets": streets
};

var overlays = {
  "Consulting": consulting,
  "Education": education
};

L.control.layers(baseLayers, overlays).addTo(map);

var group = L.featureGroup(markers); 
map.fitBounds(group.getBounds());

var标记=[]；
//地图标记的样本
var consulting=新的L.LayerGroup（）；
推动（左标记（[，]）；
L.marker（[，]，{icon:consultingIcon}）
.bindpoop（'hello'）
.addTo（咨询）；
var education=新的L.LayerGroup（）；
推动（左标记（[，]）；
L.marker（[，]，{icon:educationIcon}）
.bindpoop（'hello'）
.addTo（教育）；
var mbAttr=“”+
“图像”，
姆布尔https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoidgvyzxnhc2hpacisimeijjaju4cwfqnwgwwmwgwmnftaziyctjpbg51in0.4FH-NfH6b44wCc4BFodqWQ'；
var grayscale=L.tillelayer（mbUrl，{id:'mapbox.light'，属性：mbAttr}），
streets=L.Tillelayer（mbUrl，{id:'mapbox.streets'，属性：mbAttr}）；
var map=L.map（'mapid'{
中间：[43.6532，-79.3832]，
缩放：5，
滚轮缩放：错误，
图层：[灰度、咨询、教育]
});
var baseLayers={
“灰度”：灰度，
“街道”：街道
};
变量覆盖={
“咨询”：咨询，
“教育”：教育
};
L.控制层（基本层、覆盖层）。添加到（地图）；
var组=L.特征组（标记）；
map.fitBounds（group.getBounds（））；

如果我理解正确，您在图层控件中有一些覆盖（

咨询

和

教育

图层组），您希望您的地图在用户切换其中一个覆盖时自动适应可见标记的边界

然后，困难在于您需要检索可见标记的列表，以便计算它们的边界并相应地调整地图

一个简单的解决方案是使用插件，一个中间的“父”功能组，它将获得标记，并用插件中的子组替换类别图层组。这样，当添加到地图时，这些子组实际上会将其子标记添加到父组中。然后，获取所有可见标记的边界变得很简单：

var parentGroup=L.featureGroup（）.addTo（map），
subGroup1=L.featureGroup.子组（父组），
subGroup2=L.featureGroup.Subgroups（父组）；
//将标记添加到相应的子组中…
变量覆盖={
“子组1”：子组1，
“子组2”：子组2
};
L.控制。图层（空，覆盖）。添加到（地图）；
//当用户使用图层控制覆盖时，让地图调整视图。
map.on（'overlayadd overlayremove'，函数（）{
var bounds=parentGroup.getBounds（）；
//仅当父组实际有一些标记时，才拟合边界，
//即，它返回有效边界。
if（bounds.isValid（））{
映射边界（bounds）；
}
});

演示：

请注意，您不再需要将整个

标记

数组复制到中

免责声明：我是该插件的作者

---

如果我理解正确，您在图层控件中有一些覆盖（

consulting

和

education

图层组），并且您希望您的地图在用户切换其中一个覆盖时自动适应可见标记的边界

然后，困难在于您需要检索可见标记的列表，以便计算它们的边界并相应地调整地图

一个简单的解决方案是使用插件，一个中间的“父”功能组，它将获得标记，并用插件中的子组替换类别图层组。这样，当添加到地图时，这些子组实际上会将其子标记添加到父组中。然后，获取所有可见标记的边界变得很简单：

var parentGroup=L.featureGroup（）.addTo（map），
subGroup1=L.featureGroup.子组（父组），
subGroup2=L.featureGroup.Subgroups（父组）；
//将标记添加到相应的子组中…
变量覆盖={
“子组1”：子组1，
“子组2”：子组2
};
L.控制。图层（空，覆盖）。添加到（地图）；
//当用户使用图层控制覆盖时，让地图调整视图。
map.on（'overlayadd overlayremove'，函数（）{
var bounds=parentGroup.getBounds（）；
//仅当父组实际有一些标记时，才拟合边界，
//即，它返回有效边界。
if（bounds.isValid（））{
映射边界（bounds）；
}
});

演示：

请注意，您不再需要将整个

标记

数组复制到中

免责声明：我是该插件的作者

---

您可以使用

layerAd

和

layerremove

事件跟踪添加到地图和从地图中删除的图层。每次添加或删除某个功能组时，您都需要构建边界。包含要详细说明的注释的工作片段：

var-map=新的L.map（'传单'{
中间：[0,0]，
缩放：0，
图层：[
新的L.TileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
“属性”：“地图数据©贡献者”
})
]
});
map.on（'layeradd layerremove'，函数（）{
//创建新的空边界
var bounds=新的L.LatLngBounds（）；
//迭代贴图的层
map.eachLayer（函数（层）{
//检查图层是否为要素组
if（L.FeatureGroup的图层实例）{
//用组的边界扩展边界
extend（layer.getBounds（））；
}
});
/