javascript 將 json 數據迭代到 geojson 中以獲得 leaflet

Question

我有一些 json 數據想在 leaflet map 中使用。 我需要將 json 格式轉換為 leaflet 使用的 geojson 格式。 我還想將數據分類為朋友和家人，以便我可以在 map 上分別識別它們。

我已成功獲取（編輯）數據文件並使用開關狀態將數據分類為朋友案例和家庭案例。 在每種情況下，我都會將數據轉換為 geojson 格式。

我的問題是我無法弄清楚如何在 function getData 之外使用變量 myFriends 和 myFamily，以便我可以 plot Z1D78DC8ED51214E518B5114FEZ 上的點。

這只是我用來學習如何使用 leaflet 的假數據。 最終，我希望通過 stream 獲取這些數據，以跟蹤當前的 position 數據。

在我的代碼中，我可以通過移動console.log(myFriends); function 內部。

我試圖獲得 2 個變量 myFriends 和 myFamily ，每個變量都包含所有迭代數據。

原裝JSON資料

[
    {
"time" : 0.00, 
"ID" : 51, 
"name" : "John",
"relationship" : "Friend",
"Lat" : 56.166609, 
"Long" : 27.157364
},
{
    "time" : 0.00, 
    "ID" : 52, 
    "name" : "Sally",
    "relationship" : "Friend",
    "Lat" : 55.895501, 
    "Long" : 26.753631
    },
    {
        "time" : 0.00, 
        "ID" : 50, 
        "name" : "Tom",
        "relationship" : "Family",
        "Lat" : 56.236112,
        "Long" : 26.168675
        }
]

var myFriends =

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                   56.166609, 27.157364
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "John"
            },
            "id": 51
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                   55.895501, 26.753631
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "Sally"
            },
            "id": 52
        },
        
    ]
};

var myFamily =

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "popupContent": "Tom"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [56.236112, 26.168675]
            }
        },
       
    ]
};

程序代碼

async function getData() {

const response = await fetch('data.json');
var data = await response.json();
//console.log(data);
for (var i = 0; i < data.length; i++){
    var unit = data[i];

var relationship = unit.relationship;

switch (relationship) {
  case "Friends":
    var myFriends = {
        "type": "FeatureCollection",
        "features": [
            {
                "geometry": {
                "type": "Point",
                "coordinates": [
                unit.Lat + " , " + unit.Long
                ]
                            },
                "type": "Feature",
                "properties": {
                "popupContent": unit.name
                            },
                "id": unit.ID
            },     
                ]
                    };

    break;
  case "Family":
    console.log("Family");
    console.log(unit);  

}

    }
}

getData();


console.log(myFriends);

Answer 1

您的 var myFriends的 scope 僅限於 function getData()。 要在 getData() 之外訪問它，您需要在最后返回它。

Answer 2

您的 function 是異步 function，這意味着它返回 promise。 因此，當您調用 function 時，您需要使用 await 等待其結果。 為了使它工作，你需要

1. 修改您的 function 以返回您想要的數據。

2. 在調用 getData function 的地方使用 await

   var 結果 = 等待 getData();