Question

我在我的Rails应用程序中使用leafletjs，添加标记并使用图层组和叠加层作为＆＃34;类别＆＃34;。我根据可见（＆＃34;已检查＆＃34;）叠加层查找了如何绑定/自动放大和缩小的示例和想法，但无法找到更多。

目前，我使用了一个标记数组来存储所有地图标记，并使用markers数组来绑定地图：

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());

Answer 1

如果我理解正确，您在图层控件中有一些叠加层（consulting和education图层组），并且您希望地图在用户切换时自动适合可见标记的边界其中一个叠加。

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

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

var parentGroup = L.featureGroup().addTo(map),
    subGroup1 = L.featureGroup.subGroup(parentGroup),
    subGroup2 = L.featureGroup.subGroup(parentGroup);

// Add your markers into the appropriate SubGroup…

var overlays = {
  'SubGroup 1': subGroup1,
  'SubGroup 2': subGroup2
};

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

// Have the map adjust view anytime the user uses the Layers Control overlays.
map.on('overlayadd overlayremove', function () {
  var bounds = parentGroup.getBounds();

  // Fit bounds only if the Parent Group actually has some markers,
  // i.e. it returns valid bounds.
  if (bounds.isValid()) {
    map.fitBounds(bounds);
  }
});

演示：https://jsfiddle.net/3v7hd2vx/354/

请注意，您不再需要整体markers数组来复制标记。

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

Answer 2

您可以使用Ebstatus | dgstatus | ReadTime ON | ON | 16/07/2017 3:00:00 ON | ON | 16/07/2017 4:00:00 ON | OFF | 16/07/2017 5:00:00 ON | OFF | 16/07/2017 6:00:00 ON | ON | 16/07/2017 7:00:00 ON | OFF | 16/07/2017 9:00:00和layeradd事件跟踪要添加到地图中或从地图中删除的图层。每次添加或删除某个功能组时，您都需要构建边界。带有评论的工作片段详细说明：

＆＃13;

layerremove

＆＃13;

var map = new L.Map('leaflet', {
    center: [0, 0],
    zoom: 0,
    layers: [
        new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ]
});

map.on('layeradd layerremove', function () {
    // Create new empty bounds
    var bounds = new L.LatLngBounds();
    // Iterate the map's layers
    map.eachLayer(function (layer) {
        // Check if layer is a featuregroup
        if (layer instanceof L.FeatureGroup) {
            // Extend bounds with group's bounds
            bounds.extend(layer.getBounds());
        }
    });
    // Check if bounds are valid (could be empty)
    if (bounds.isValid()) {
        // Valid, fit bounds
        map.fitBounds(bounds);
    } else {
        // Invalid, fit world
        map.fitWorld();
    }
});

var markers = new L.FeatureGroup([
    new L.Marker([-30, -30]),
    new L.Marker([30, -30]),
    new L.Marker([-30, -60]),
    new L.Marker([30, -60])
]).addTo(map);

var polylines = new L.FeatureGroup([
    new L.Polyline([[-30, 30], [30, 60]]),
    new L.Polyline([[30, 30], [-30, 60]])
]).addTo(map);

var control = new L.Control.Layers(null, {
    'Markers': markers,
    'Polylines': polylines
}).addTo(map);

＆＃13;

body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}

＆＃13;

希望有所帮助，祝你好运。

Leafletjs动态地将地图绑定到可见叠加层

2 个答案: