Geojson Point FeatureCollection 插入一个变量

Question

我从 MySQL 数据库创建了一个 PHP 坐标数组。我在 HTML 网站中传递给 JavaScript 的这个数组。在此站点上，我想将这些坐标显示为 Mapbox API 地图中的标记。

除了在 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 中手动输入结果时，地图显示了所有标记。控制台日志：

{"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 对象中。

有什么想法吗？

非常感谢。

Answer 1

您的 GeoJSON 已正确构建，you can check if it's valid here

好像你正在将一个字符串传递给 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
  }
});

Geojson Point FeatureCollection 插入一个变量

Geojson Point FeatureCollection insert a variable

javascript

php

object

geojson

mapbox