javascript - GeoJSON - 在表格中显示所有功能

Question

我试图在网站上的表格中列出 GeoJSON 文件中的所有功能，但我一直在弄清楚如何实现这一点。

作为第一步，我构建了一个 Leaflet map ，显示了从 GeoJSON 文件加载的所有位置，效果非常好。

除了 map 之外，我还想在第二页上有一个评级系统，它在一个表格中包含来自 GeoJSON 的所有位置(我现在只需要名称，评级系统将是一个不同的问题...)。

请注意，我是一个绝对的初学者，需要一个非常详细的“教程”。

我的 GeoJSON 看起来像这样:

   {
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ x,y ]
    },
    "properties": {
    "FID":0,
    "Shape *":"Point",
    "Name":"XXX",
    "Ditrict":"Dist1",
    "Str_No":"Street 1",
    "ZIP":"Some ZIP",
    "Phone":"Some Number",
    "Rating":4.5
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ x,y ]
    }, and so on

我希望有一个简单的解决方案。

提前致谢!

Answer 1

如果您的 GeoJSON 对象是 var geoJSON ，您可以通过执行以下操作获取每个功能的所有名称:

var featureNames = [];

for (var i = 0; i < geoJSON.features.length; i++) {
  var currentFeature = geoJSON.features[i];

  var featureName = currentFeature.properties.Name;
  var featureId = currentFeature.properties.FID;

  console.log(featureName);
  featureNames.push({ featureId: featureId, featureName : featureName });
}

所以 featureNames将有每个 feature对象及其在数组中的名称。

要将它们全部放在一个表中，我将使用 jQuery DataTables .如果我有一个 <div id="myTable"> ，然后:

$('#myTable').DataTable( {
  "columnDefs": [
    { "title": "Feature Names", "targets": 0 }
  ]
  data: featureNames,
  scrollY: 300,
  paging: false
} );