从 JSON 文件中的数组中查找最小值和最大值 p5.js

Question

我有一个JSON数据显示黄金海岸的公交候车亭

这是我的数据=https://data.gov.au/geoserver/gold-coast/wfs?request=GetFeature&typeName=ckan_be880d63_175a_4383_b0f2_ef88b831eba9&outputFormat=json

从那里我想使用 p5.js 找出最小和最大纬度和经度并将它们绘制在图表上这是我到目前为止的代码

function preload(){
  shelters = loadJSON('https://data.gov.au/geoserver/gold-coast/wfs?request=GetFeature&typeName=ckan_be880d63_175a_4383_b0f2_ef88b831eba9&outputFormat=json')
}

function setup() {
  createCanvas(400, 400`enter code here`);
  print(shelters)
  noLoop()
}

function draw() {
  background(220);
  bus  = shelters.features
  max_min()
  
}

function max_min(){
  for(let i = 0; i < bus.length; i ++ ){
    latitudes = createDiv('h1', bus[i].geometry.coordinate)
    max_lat = Math.max(latitudes)
  }
  console.log(...max_lat)
}

我找不到最大和最小纬度和经度

Answer 1

您有一些无法在您的代码中运行的内容，让我们先看一下：

首先，在你的 createCanvas(400, 400``enter code here``); 行中你有一个语法错误，你需要删除 enter code here 字符串。
然后在你的 max_min() 函数中，你迭代所有的总线并得到 bus[i].geometry.coordinate。我的理解是，这是一个包含公交车经纬度的数组，所以在这个数组上使用 Math.max 将 return 当前公交车的经纬度之间的最大值，这不是你想要什么。

你有多种选择来做你想做的事。如果你真的想使用 Math.max() 和 Math.min() 并且熟悉 map 你可以：

构建所有纬度的数组：bus.map(b => b.geometry.coordinates[0]) 即获取 bus 数组中的所有项目并将其转换为仅包含每条公交车 geometry.coordinates 第一项的数组属性。（将 [0] 替换为 [1] 以获得经度）
使用 ... 运算符解构它，因为 Math.max() 不接受数组而是参数列表
并将其分配给一个值，您的函数将如下所示：

function max_min() {
    const maxLat = Math.max(...bus.map(b => b.geometry.coordinates[0]));
    const minLat = Math.min(...bus.map(b => b.geometry.coordinates[0]));
    const maxLong = Math.max(...bus.map(b => b.geometry.coordinates[1]));
    const minLong = Math.min(...bus.map(b => b.geometry.coordinates[1]));

    return { maxLat, minLat, maxLong, minLong };
}

这里的代码很短，但是你在 bus 数组上迭代了 4 次，效率不是特别高。因此，您还可以采用另一种方法，即创建一个简短的辅助函数来获取公交车的经纬度：

// Given a feature return its latitude and longitude in an object
function getLatLong(feature) {
    const [lat, long] = feature.geometry.coordinates;
    return { lat, long };
}

然后遍历所有总线并根据这些信息更新最小值和最大值，如下所示：

// Find the max and min longitude and latitude and return them in an object
function max_min() {
    // Use the first feature of the list to initialize the max and min values
    const { lat: firstLat, long: firstLong } = getLatLong(bus[0]);
    let maxLat = firstLat;
    let minLat = firstLat;
    let maxLong = firstLong;
    let minLong = firstLong;

    // Iterate through all the features to update the max and min values
    for (let i = 1; i < bus.length; i++) {
        const { lat, long } = getLatLong(bus[i]);
        if (lat > maxLat) {
            maxLat = lat;
        }
        if (lat < minLat) {
            minLat = lat;
        }
        if (long > maxLong) {
            maxLong = long;
        }
        if (long < minLong) {
            minLong = long;
        }
    }

    // Return the updated max and min values
    return { maxLat, minLat, maxLong, minLong };
}

终于在draw()中你可以对它们做任何你想做的事了，例如我只把它们写在canvas:

function draw() {
    background(220);

    // Get the max and min values with our helper function
    const { maxLat, minLat, maxLong, minLong } = max_min();

    // Show the values
    text(`max lat ${maxLat}`, 0, 10);
    text(`min lat ${minLat}`, 0, 30);
    text(`max long ${maxLong}`, 0, 50);
    text(`min long ${minLong}`, 0, 70);
}

我创建了 this codepen 完整的代码，这样您就可以了解各个部分是如何协同工作的。

从 JSON 文件中的数组中查找最小值和最大值 p5.js

Finding the minimum and maximum value from an array in a JSON File in p5.js

json

max

minimum

p5.js