I have a vector layer that I can select features using a drag box in OL 3. now I want to show the attributes of the features in a table. I have the following code in which I can retrieve the name but I dont know how to fetch all the attributes and their names for the header.
dragBox.on('boxend', function(e) { var info = []; var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); info.push(feature.get('NAME')); }); if (info.length > 0) { var tableElem = document.createElement('table'); createTable(info,tableElem); } }); function createTable(info,tableElem) { var rowElem, colElem; if ( info.length == 0) { alert(info); } else { for (var i = 0; i < info.length; i++) { rowElem = document.createElement('tr'); for (var j = 0; j < 2; j++) { colElem = document.createElement('td'); if (j==0){ colElem.appendChild(document.createTextNode(i+1)); //to print cell number rowElem.appendChild(colElem); } else{ colElem.appendChild(document.createTextNode(info)); rowElem.appendChild(colElem); } } tableElem.appendChild(rowElem); } } tableBox.appendChild(tableElem); infoBox.innerHTML = 'Feature information list:' }
أكثر...
dragBox.on('boxend', function(e) { var info = []; var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); info.push(feature.get('NAME')); }); if (info.length > 0) { var tableElem = document.createElement('table'); createTable(info,tableElem); } }); function createTable(info,tableElem) { var rowElem, colElem; if ( info.length == 0) { alert(info); } else { for (var i = 0; i < info.length; i++) { rowElem = document.createElement('tr'); for (var j = 0; j < 2; j++) { colElem = document.createElement('td'); if (j==0){ colElem.appendChild(document.createTextNode(i+1)); //to print cell number rowElem.appendChild(colElem); } else{ colElem.appendChild(document.createTextNode(info)); rowElem.appendChild(colElem); } } tableElem.appendChild(rowElem); } } tableBox.appendChild(tableElem); infoBox.innerHTML = 'Feature information list:' }
أكثر...