Geojson點FeatureCollection插入一個變量

Question

我使用 PHP 從 MySQL 數據庫創建一個帶有坐標的數組。 我在我的 HTML 網站中將此數組傳遞給 JavaScript。 在這個站點上，我想在 Mapbox API map 中將這些坐標顯示為標記。

除了在 Geojson FeatureCollection 中實現這些坐標的最后一步之外，它一切正常。

function fccreate() {
  var i;
  var indextt = Object.keys(testtable_array).length;
  for (i = 0; i < indextt; i++) {
      text += '{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [' + testtable_array[i][1] + ',' + testtable_array[i][2] + ']}},';
  }
newtext = text.substring(0, text.length - 1);
addsfa();
};

    
function addsfa() {
console.log(newtext);
map.addSource('mypoints3', {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": [
              newtext
          ]
          
    }
});
    
map.addLayer({
'id': 'mypoints3',
'type': 'symbol',
'source': 'mypoints3',
'layout': {
'icon-image': 'custom-marker',
}
});
}

這是來自 PHP 的數組：

testtable_array

控制台的日志顯示了正確的結果，因為當我在 geojson 中手動輸入結果時，map 會顯示所有標記。 控制台日志：

{"type": "Feature","properties": {}, "geometry": {"type": "Point","coordinates": [9.522359619140815,46.85314975627398]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.522359619140815,46.85314975627398]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.09251953125019,46.973226855658936]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.352956040816935,46.479010689522994]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.512746582031014,46.84939301152497]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [20.05803762373668,47.77883708313206]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.409505615234451,46.86817410754625]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.296895751952889,46.80053141630188]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.5278527832034,46.857845317683655]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [8.058173337244995,47.247794215485754]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.76377244255417,46.436848511271364]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.62146641328738,1.658296133484285]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [23.98528433420927,37.41062770063955]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.518239746094821,46.8531497562733]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.309174279171373,46.41645943261082]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.309174279171373,46.41645943261082]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.378164062501838,46.91416003055292]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.529226074219622,46.8531497562733]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.12387896865556,46.982512425911864]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.255599004325092,43.76971806046333]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.176296671409006,46.83780694910723]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [8.361458390095095,48.53379740798499]}}

我是geojson的新手，所以也許我不知道如何將這個變量粘貼到geojson object中。

有任何想法嗎？

非常感謝。

Answer 1

您的 GeoJSON 已正確構建，您可以在此處檢查它是否有效

好像您正在將字符串傳遞給 Mapbox， features需要是一個對象數組（GeoJSON），您可以嘗試以下操作：

// Create an array that will store the features
const features = [];

// Loop and build each feature
for (let i = 0; i < indextt; i++) {
  const feature = {"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [testtable_array[i][1], testtable_array[i][2]]}};
  features.push(feature);
}

// Add the features to the Mapbox source
map.addSource('mypoints3', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features
  }
});