loadJSON 与 lat 和 lon 并获取变量

Question

我正在加载 JSON 文件，我想从文件中获取纬度和经度变量。 我正在使用 let lat = row.get('lat'); 但它不起作用并且在 const pix = yMap.latLngToPixel(data.lat,data.lon);它说它不认识它。 我怎样才能让它正常工作，因为之后我想从 localhost 获取 json 文件，这就是我使用 p5.js 库的原因。

<title>Mappa </title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/mappa-mundi@0.0.4" type="text/javascript"></script>
<script src="mappa.js" ></script>

Json.file（就像我将从 localhost 获取的那个）

{"conflicts":[
{ "Place":"Afganistan",
"lat":33.0000,
"lon":65.0000 }
,
{"Place": "Koln",
"lat":17.0500,
"lon":-61.8000}
,
 {"Place": "ai",
 "lat":18.2500,
 "lon": -63.166}

  ]
 }
  }

js.file

let data;

let myMap;
let canvas;

const mappa = new Mappa ('Leaflet');

const options = {
lat: 39.074207, 
lng: 21.824312,
zoom: 2,
style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

function preload(){
data = loadJSON ("conflicts.json");

//var jsonData = JSON.parse(data);

}



function setup(){

canvas = createCanvas(1350,600); 
myMap = mappa.tileMap(options); 
myMap.overlay(canvas);


 let lat = row.get('lat');
 let lon = row.get('lon');

}

 function draw() {
clear();
const pix = myMap.latLngToPixel(data.lat,data.lon);
fill (255,0,200);
ellipse (pix.x,pix.y,20,20); 
}

Answer 1

您的data 是一个具有单个属性的对象，该属性是一个数组。要访问此数组中的每个元素，您需要对其进行迭代：

 for (let item of data.conflicts)
    draw(item)


 function draw(item) {
    const pix = myMap.latLngToPixel(item.lat, item.lon);
    fill (255,0,200);
    ellipse (pix.x,pix.y,20,20); 
 }