0
현재 하위 그룹이 제대로 작동하는 데 문제가 있습니다. 아래 코드를 사용하면 클러스터를 표시 할 수 있지만 클러스터를 해제하면 그에 따라 업데이트되지 않습니다. 또한 레이어를 켜면 기본 포인트가 모두 켜집니다. 하위 그룹 레이어를 제대로 작동 시키려면 어떻게해야합니까?전단/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> — Map data © ' +
'<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> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var aerialAttr = 'Tiles © Esri — 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> — Map data © <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>
코드를 살펴 줘서 고맙습니다. 제공 한 데모를 검토 한 결과, 필요한 모든 추가 기능을 모두 수정하고 작동시킬 수있었습니다. – osupb37