Geographic Information Systems Asked on June 2, 2021
I have doubts about how to show or hide a vector layer on the map once I have created it. I generate it after doing a php query and receiving the data in json.
This is the function that I use to send the data to the query and once the json is received I paint it on the map:
function search(){
var element = document.getElementById("formName");
obje = document.getElementById('cbx_esp');
var txt='';
txt = """+obje.value+""";
url_obje = 'abundance='+txt;
drawAbundance(obje.value);
}
function drawAbundance(cbx_espId){
var vectorAbundance = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var proj = projection.getCode();
var url = "obAbundance.php"
var xhr = new XMLHttpRequest();
var params = {
abundance: cbx_espId
}
xhr.open('POST', url);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
var onError = function() {
vectorAbundance.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
xhr.responseText;
console.log(xhr.responseText);
if (xhr.status == 200) {
vectorAbundance.addFeatures(
vectorAbundance.getFormat().readFeatures(xhr.responseText)
);
map.getView().fit(vectorAbundance.getExtent());
$("#formName")[0].reset();
} else {
onError();
}
}
xhr.send(JSON.stringify(params));
},
});
var vectorlayer = new ol.layer.Vector({
source:vectorAbundance,
visible:true,
displayInLayerSwitcher: false,
style: distICES,
});
map.addLayer(vectorlayer)
}
//I tried this to show or not the veclayer
function add_de(e){
if(e.checked){
map.addLayer(vectorlayer);
}else{
map.removelayer(vectorlayer);
}
}
I tried to create an input check and depending on whether it was checked or not, the vector layer was loaded, but it gives me the error that it is not defined:
Uncaught ReferenceError: vectorlayer is not defined
Your declaration var vectorlayer
is within function drawAbundance
. You second function can't access it because of scope. See this article https://dmitripavlutin.com/javascript-scope/#3-function-scope as your issue is not really related to OpenLayers but to JavaScript in fact.
A correction below just for this issue.
function search(){
var element = document.getElementById("formName");
obje = document.getElementById('cbx_esp');
var txt='';
txt = """+obje.value+""";
url_obje = 'abundance='+txt;
drawAbundance(obje.value);
}
var vectorlayer;
function drawAbundance(cbx_espId){
var vectorAbundance = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var proj = projection.getCode();
var url = "obAbundance.php"
var xhr = new XMLHttpRequest();
var params = {
abundance: cbx_espId
}
xhr.open('POST', url);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
var onError = function() {
vectorAbundance.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
xhr.responseText;
console.log(xhr.responseText);
if (xhr.status == 200) {
vectorAbundance.addFeatures(
vectorAbundance.getFormat().readFeatures(xhr.responseText)
);
map.getView().fit(vectorAbundance.getExtent());
$("#formName")[0].reset();
} else {
onError();
}
}
xhr.send(JSON.stringify(params));
},
});
vectorlayer = new ol.layer.Vector({
source:vectorAbundance,
visible:true,
displayInLayerSwitcher: false,
style: distICES,
});
map.addLayer(vectorlayer)
}
//I tried this to show or not the veclayer
function add_de(e){
if(e.checked){
map.addLayer(vectorlayer);
}else{
map.removelayer(vectorlayer);
}
}
Correct answer by ThomasG77 on June 2, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP