GeoJSON

Question

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

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

除了地图之外，我还想在第二页上有一个评级系统，它以 table 中的 GeoJSON 中的所有位置为特色（我现在只需要名称，评级系统将是一个不同的问题......）。

请注意，我是一个绝对的初学者，因此需要非常详细的 "tutorial"。

我的 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 对象及其名称放入一个数组中。

要将它们全部放在 table 中，我将使用 jQuery DataTables。如果我有一个<div id="myTable">，那么：

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

GeoJSON - 在 table 中显示所有特征

GeoJSON - Display all features in a table

html

javascript

jquery

leaflet