问题
I have been fighting with the GeoJSON sublayers in leaflet map.
The problem is, that when I switch them off, they still appear, when change the zoom level In this event I cannot even switch them off as per in the image below:
Once I only click on the job thick, then console says:
Uncaught TypeError: Cannot read property '_targets' of null at NewClass.removeInteractiveTarget (Layer.js:83) at NewClass._removePath (SVG.js:132) at NewClass.onRemove (Path.js:90) at NewClass.removeLayer (Layer.js:185) at NewClass.eachLayer (LayerGroup.js:121) at NewClass.onRemove (LayerGroup.js:109) at NewClass.removeLayer (Layer.js:185) at NewClass.removeFrom (Layer.js:66) at NewClass.remove (Layer.js:59) at NewClass.onRemove (leaflet.markercluster.js:1)
Before I start to write my code, see my JS fiddle here:
https://jsfiddle.net/Krukarius/abnkfxcL/3/
And the map demo here:
https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html
Now my existing code:
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);
}
});
I want to have these layers working. Doesanyone have some ideas how to solve it?
Thanks & Regards
回答1:
One reasonable solution is switching off the main geoJSON layer, whereas the another sublayers has been determined.
The simplified code can look like this:
/* ----------- 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);
and afterwards:
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.
来源：https://stackoverflow.com/questions/59144077/leaflet-checking-and-disabling-geojson-sublayers-troubleshoots