Leaflet/CartoDB L.featureGroup.subGroup（）

我目前遇到的問題使子組正常工作。使用下面的代碼，我可以顯示羣集，但是當我關閉羣集的層時不會相應地更新。另外，當我打開一個圖層時，所有的基本點都會打開。如何讓子組圖層正常工作？Leaflet/CartoDB L.featureGroup.subGroup（）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Map</title> 

    <meta charset="UTF-8"> 

    <!-- If IE use the latest rendering engine --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <!-- Set the page to the width of the device and set the zoon level --> 
    <meta name="viewport" content="width = device-width, initial-scale = 1"> 

    <!-- jquery --> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

    <!-- Leaflet --> 
    <link rel="stylesheet" href="http://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <script src="leaflet.featuregroup.subgroup.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.featuregroup.subgroup.js"></script> 


</head> 
<body> 

    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-beta.2.0/dist/MarkerCluster.Default.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-beta.2.0/dist/MarkerCluster.css"> 
    <script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-beta.2.0/dist/leaflet.markercluster.js"></script> 

    <div id="map" style="height: 800px"></div> 

    <script> 
     var map = L.map('map').setView([38.607, -97.277], 5); 

     var OpenMapSurfer_Grayscale = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roadsg/x={x}&y={y}&z={z}', 
      { 
      maxZoom: 19, 
      attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">' + 
      'GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; ' + 
      '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
     }).addTo(map); 

     //attributes for basemap credit (lower right hand corner annotation) 
     var streetsAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'; 
     var aerialAttr = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'; 
     var artsyfartsyAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'; 

     //crete variables for the base map layer switcher 
     var streets = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', { 
      id: 'MapID', 
      attribution: streetsAttr 
      }), 
      aerial = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { 
      id: 'MapID', 
      attribution: aerialAttr 
      }), 
      artsyfartsy = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { 
      id: 'MapID', 
      attribution: artsyfartsyAttr 
      }); 

     //create baseMaps variable to store basemap layer switcher 
     var baseMaps = { 
      "Streets": streets, 
      "Aerial": aerial, 
      "ArtsyFartsy": artsyfartsy 
     }; 
     var masClusGroup = new L.markerClusterGroup().addTo(map); 

     var efuSub = L.featureGroup.subGroup(masClusGroup).addTo(map); 
     var f1Sub = L.featureGroup.subGroup(masClusGroup).addTo(map); 
     var f2Sub = L.featureGroup.subGroup(masClusGroup).addTo(map); 

     var sqlEFU = "https://kmitch24.carto.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM tornadodata_beginningpoint where tor_f_scal = 'EFU'"; 
     var sqlF1 = "https://kmitch24.carto.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM tornadodata_beginningpoint where tor_f_scal = 'F1'"; 
     var sqlF2 = "https://kmitch24.carto.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM tornadodata_beginningpoint where tor_f_scal = 'F2'"; 

     $.getJSON(sqlEFU, function(cartodbdata) { 
      geojsonlayer= L.geoJson(cartodbdata, { 
       onEachFeature: function (feature, layer) { 
        layer.bindPopup("F-Scale: " + feature.properties.tor_f_scal + "<br>" + 
         "Deaths: " + feature.properties.deaths_dir + "<br>" + 
         "Damage: " + feature.properties.damage_pro + ''); 
       } 
      }).addTo(efuSub); 
     }); 
     $.getJSON(sqlF1, function(cartodbdata) { 
      geojsonlayer= L.geoJson(cartodbdata, { 
       onEachFeature: function (feature, layer) { 
        layer.bindPopup("F-Scale: " + feature.properties.tor_f_scal + "<br>" + 
         "Deaths: " + feature.properties.deaths_dir + "<br>" + 
         "Damage: " + feature.properties.damage_pro + ''); 
       } 
      }).addTo(f1Sub); 
     }); 

     $.getJSON(sqlF2, function(cartodbdata) { 
      geojsonlayer= L.geoJson(cartodbdata, { 
       onEachFeature: function (feature, layer) { 
        layer.bindPopup("F-Scale: " + feature.properties.tor_f_scal + "<br>" + 
         "Deaths: " + feature.properties.deaths_dir + "<br>" + 
         "Damage: " + feature.properties.damage_pro + ''); 
       } 
      }).addTo(f2Sub); 
     }); 

     //Tornado Path. 
     var tPath = new L.layerGroup([]); 
     var path = "https://kmitch24.carto.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM tornadodata_path"; 

     $.getJSON(path, function(cartodbdata) { 
      geojsonlayer= L.geoJson(cartodbdata, { 
      }).addTo(tPath); 
     }); 

     var overLayMap = { 
      "EFU": efuSub, 
      "F1": f1Sub, 
      "F2": f2Sub, 
      "Tornado Path": tPath 
     }; 

     L.control.layers(baseMaps, overLayMap).addTo(map); 
    </script> 
</body> 
</html> 
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>

來源

2016-11-19 osupb37

編輯：

看起來你只需要使用Leaflet.markercluster版本1.0.0，而不是1.0.0-beta.2.0

版本1.0.0（這是最新的）包括PR#624，它帶來了嵌套層組的管理，這很可能是你的情況。

演示：http://plnkr.co/edit/iA9f3jd5Ov0Ln46Id7FW?p=preview

原來的答覆：

不知道確切原因的分組似乎是「斷開」從父標記羣集組...：-S

Leaflet.FeatureGroup.SubGroup應該正確地處理中間圖層組，就像你用GeoJSON組從你的GeoJSON數據構建Leaflet圖層一樣，這些圖層是由jQuery AJAX檢索的。演示：http://plnkr.co/edit/Y0OlNGdBE47AnsL4seLK?p=preview

一個解決辦法是擺脫中間組和各層直接添加到相應的分組：

$.getJSON(sqlEFU, function(cartodbdata) { 
    geojsonlayer= L.geoJson(cartodbdata, { 
     onEachFeature: function (feature, layer) { 
      layer.bindPopup("some text").addTo(efuSub); // Add individual layers 
     } 
    })/*.addTo(efuSub)*/; // No longer add the intermediate GeoJSON group. 
});

演示：http://plnkr.co/edit/eMzG9RkoV7fsNODotiSt?p=preview

如果你可以建立一個最小測試如果您的問題重現您的問題，那麼查明您的代碼無法正常工作的原因會更加容易。

來源

2016-11-19 18:20:52 ghybs

感謝您查看代碼，我在審查了您提供的演示後，我已經能夠修復並獲取所有需要的所有附加功能。 – osupb37

Leaflet/CartoDB L.featureGroup.subGroup（）

回答

相關問題