javascript - 传单检查和禁用 GeoJSON 子层故障排除
问题描述
我一直在与传单地图中的 GeoJSON 子层作斗争。
问题是，当我关闭它们时，它们仍然会出现，当更改缩放级别时，在这种情况下，我什至无法按照下图将它们关闭：
一旦我只点击厚厚的工作，控制台就会说：
未捕获的类型错误：无法在 NewClass.removePath (SVG.js:132) 在 NewClass.onRemove (Path.js:90) 在 NewClass.removeInteractiveTarget (Layer.js:83) 在 NewClass.removeLayer (Layer .js:185) 在 NewClass.eachLayer (LayerGroup.js:121) 在 NewClass.onRemove (LayerGroup.js:109) 在 NewClass.removeLayer (Layer.js:185) 在 NewClass.removeFrom (Layer.js:66) 在NewClass.onRemove (leaflet.markercluster.js:1) 处的 NewClass.remove (Layer.js:59)
在我开始编写代码之前，请在此处查看我的 JS fiddle：
https://jsfiddle.net/Krukarius/abnkfxcL/3/
还有这里的地图演示：
https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html
现在我现有的代码：
document.querySelector("input[name=vm]").addEventListener('change', function() { //main geoJSON layer
if(this.checked) {
if (!map.hasLayer(job2)) map.removeLayer(job2);
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
//document.querySelector("input[name=vm]").disabled
document.querySelector("input[name=infill]").disabled = false;
document.querySelector("input[name=mdu]").disabled = false;
document.querySelector("input[name=infill]").checked = true;
document.querySelector("input[name=mdu]").checked = true;
}
else {
if (map.hasLayer(job2)) map.removeLayer(job2);
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
document.querySelector("input[name=infill]").disabled = true;
document.querySelector("input[name=mdu]").disabled = true;
document.querySelector("input[name=infill]").checked = false;
document.querySelector("input[name=mdu]").checked = false;
}
});
document.querySelector("input[name=infill]").addEventListener('change', function() { //GeoJSOn sublayer1
if(this.checked) {
if (!map.hasLayer(infill)) map.addLayer(infill);
//if (!map.hasLayer(job2)) map.addLayer(job2);
//if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
document.querySelector("input[name=vm]").disabled = true;
}
else {
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(job2)) map.removeLayer(job2);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
document.querySelector("input[name=vm]").checked = true;
}
});
document.querySelector("input[name=mdu]").addEventListener('change', function() { //GeoJSON sublayer2
if(this.checked) {
if (!map.hasLayer(mdu)) map.addLayer(mdu);
//if (!map.hasLayer(job2)) map.removeLayer(job2);
//if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
//document.querySelector("input[name=vm]").disabled = true;
}
else {
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(infill)) map.addLayer(infill);
if (map.hasLayer(job2)) map.removeLayer(job2);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
//document.querySelector("input[name=vm]").checked = true;
}
});
map.on('zoomend', function() {
if (map.getZoom() < 9){
if (map.hasLayer(job)) map.removeLayer(job);
if (map.hasLayer(job2)) map.removeLayer(job2);
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(job3)) map.removeLayer(job3);
}
else {
if (document.querySelector("input[name=cf]").checked && !map.hasLayer(job)) map.addLayer(job);
if (document.querySelector("input[name=vm]").checked && !map.hasLayer(job2)) map.addLayer(job2);
if (document.querySelector("input[name=infill]").checked && !map.hasLayer(infill)) map.addLayer(infill);
if (document.querySelector("input[name=mdu]").checked && !map.hasLayer(infill)) map.addLayer(mdu);
if (document.querySelector("input[name=bt]").checked && !map.hasLayer(job3)) map.addLayer(job3);
}
});
我想让这些层工作。有没有人有一些想法如何解决它？
感谢和问候
解决方案
一个合理的解决方案是关闭主 geoJSON 层，而另一个子层已经确定。
简化的代码如下所示：
/* ----------- main GeoJSON Layer job2 made inactive!!! ---------------
job2 = L.geoJson(data2, { //layer2 Virgin Media start
style: style2,
pointToLayer: function(feature, latlng) {
feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
label = String(feature.properties.Owner)
if (feature.properties.Post_Survey_Home_Count >=100)
return L.circleMarker(latlng, {
radius:12,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=50)
return L.circleMarker(latlng, {
radius:9,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=1)
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count === "")
return L.circleMarker(latlng, {
radius:4,
//opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.6,
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
},
onEachFeature: function (feature, layer) { // Virgin Media tracker data start ---------
layer._leaflet_id = feature.properties.Owner;
var popupContent = "<p><h2>" +
feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
feature.properties.Status + "</h3><b> NBU ID:</b> " +
feature.properties.NBU + "</br><b> Ticket ID:</b> " +
feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
feature.properties.Address + "</br><b> Address (postcode):</b> " +
feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
feature.properties.General_notes + "</br>" +
'</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
'<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
layer.on({
mouseover: function (e) {
this.setStyle({
'fillColor': '#663300',
'weight':11
});
},
mouseout: function (e) {
job2.resetStyle(this);
}
}); //layer.on finish
} //Virgin Media onEachfeature tracker finish
})//.addTo(map); //layer 2 Virgin Media finish
*/
infill = L.geoJson(data2, { //1st geoJSON sublayer, deriving from the "job" layer
style: style2,
pointToLayer: function(feature, latlng) {
feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
label = String(feature.properties.Owner)
if (feature.properties.Post_Survey_Home_Count >=100)
return L.circleMarker(latlng, {
radius:12,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=50)
return L.circleMarker(latlng, {
radius:9,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=1)
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count === "")
return L.circleMarker(latlng, {
radius:4,
//opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.6,
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
},
onEachFeature: function (feature, layer) {
layer._leaflet_id = feature.properties.Owner;
var popupContent = "<p><h2>" +
feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
feature.properties.Status + "</h3><b> NBU ID:</b> " +
feature.properties.NBU + "</br><b> Ticket ID:</b> " +
feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
feature.properties.Address + "</br><b> Address (postcode):</b> " +
feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
feature.properties.General_notes + "</br>" +
'</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
'<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
layer.on({
mouseover: function (e) {
this.setStyle({
'fillColor': '#663300',
'weight':11
});
},
mouseout: function (e) {
infill.resetStyle(this);
}
}); //layer.on finish
},
filter: function(feature, layer) {
return (feature.properties.Type == "Infill" );
}
})//.addTo(map); //Note turned on to start map with Data, Checkbox has checked property.
mdu = L.geoJson(data2, { //2nd geoJSON sublayer, deriving from the "job" layer
style: style2,
pointToLayer: function(feature, latlng) {
feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
label = String(feature.properties.Owner)
if (feature.properties.Post_Survey_Home_Count >=100)
return L.circleMarker(latlng, {
radius:12,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=50)
return L.circleMarker(latlng, {
radius:9,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count >=1)
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.8
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
else if (feature.properties.Post_Survey_Home_Count === "")
return L.circleMarker(latlng, {
radius:4,
//opacity: .5,
//color: "#000",
color:getColor2(feature.properties.Type),
fillColor: getColor2(feature.properties.Type),
fillOpacity: 0.6,
}).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip();
},
onEachFeature: function (feature, layer) {
layer._leaflet_id = feature.properties.Owner;
var popupContent = "<p><h2>" +
feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
feature.properties.Status + "</h3><b> NBU ID:</b> " +
feature.properties.NBU + "</br><b> Ticket ID:</b> " +
feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
feature.properties.Address + "</br><b> Address (postcode):</b> " +
feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
feature.properties.General_notes + "</br>" +
'</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
'<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
layer.on({
mouseover: function (e) {
this.setStyle({
'fillColor': '#663300',
'weight':11
});
},
mouseout: function (e) {
mdu.resetStyle(this);
}
}); //layer.on finish
},
filter: function(feature, layer) {
return (feature.properties.Type == "MDU" );
}
})//.addTo(map);
之后：
document.querySelector("input[name=vm]").addEventListener('change', function() {
if(this.checked) {
//if (!map.hasLayer(job2)) map.addLayer(job2); - not needed as the job layer is inactive
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
if (!map.hasLayer(featuresLayer2a)) map.addLayer(featuresLayer2a);
document.querySelector("input[name=infill]").disabled = false;
document.querySelector("input[name=mdu]").disabled = false;
document.querySelector("input[name=infill]").checked = true;
document.querySelector("input[name=mdu]").checked = true;
}
else {
//if (map.hasLayer(job2)) map.removeLayer(job2); - not needed as the job layer is inactive
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
if (map.hasLayer(featuresLayer2a)) map.removeLayer(featuresLayer2a);
document.querySelector("input[name=infill]").disabled = true;
document.querySelector("input[name=mdu]").disabled = true;
document.querySelector("input[name=infill]").checked = false;
document.querySelector("input[name=mdu]").checked = false;
}
});
document.querySelector("input[name=infill]").addEventListener('change', function() {
if(this.checked) {
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(featuresLayer2)) map.addLayer(featuresLayer2);
}
else {
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
}
});
document.querySelector("input[name=mdu]").addEventListener('change', function() {
if(this.checked) {
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featuresLayer2a)) map.addLayer(featuresLayer2a);
}
else {
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(featuresLayer2a)) map.removeLayer(featuresLayer2a);
}
});
This is the one reasonable solution for now, which works. I believe, that we still are able to make the previous combination running.
推荐阅读
- javascript - 我怎样才能让这个 javascript 工作不止一次？
- python - 如何为每个交叉验证折叠显示混淆矩阵和报告（召回、精度、fmeasure）
- testing - 在 Flutter 测试中获取小部件的位置？
- reactjs - undefined is not a function '(0, _reactNavigation.StackNavigator)' 未定义）
- amazon-web-services - aws ebs 快照与 sc1“冷”hhd 的优势
- clojurescript - 使用 js->clj 转换为 json 时如何将关键字保留在数组中？
- java - 将 SQL 连接到 php 或 java
- java - Oracle JDBC 从过程中获取 SYS_REFCURSOR
- python - 我的 python 代码中不断出现“invalid \x escape”错误。我究竟做错了什么？
- python - Peewee ORM：根据外键字段（backrefs）上的属性进行选择