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

Posted 2023-03-16

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

【英文标题】：Finding the minimum and maximum value from an array in a JSON File in p5.js

【发布时间】：2021-04-11 00:41:06

【问题描述】：

我有一个显示黄金海岸巴士候车亭的 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)

我无法找到最大和最小纬度和经度

【参考方案1】：

您的代码中有一些无法使用的东西，让我们先来看看：

首先，在您的createCanvas(400, 400``enter code here``); 行中，您有一个语法错误，您需要删除enter code here 字符串。

然后在您的max_min() 函数中，您迭代所有总线并获得bus[i].geometry.coordinate。我的理解是这是一个包含公交车经纬度的数组，所以在这个数组上使用Math.max会返回当前公交车经纬度之间的最大值，这不是你想要的。

您有多种选择来做您想做的事。如果你真的想使用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()你可以对它们做任何你想做的事情，例如我只在画布上写它们：

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 并使用了完整的代码，以便您了解各个部分是如何协同工作的。

【讨论】：

非常感谢！！！！这真的很有帮助！！！

现在也是，抱歉打扰了，你知道如何使用地图功能在公共汽车上绘制点吗？

你有很多不同的方法来做到这一点：地图功能将允许你只获得你需要绘制的数据（例如将你的公共汽车列表转换为一个简单的坐标列表）但是然后这真的取决于你。您使用 p5js 显示地图图像并以某种方式将纬度/经度转换为像素，如果您想要一个图表，您可以使用 char.js 而不是 p5 ...您将不得不做一些研究，尝试第一个实现如果您遇到困难，请发布另一个关于您无法解决的确切问题的问题。

我认为像“如何在地图上显示位置”这样的问题可能会因为“太宽泛”而被关闭

***.com/questions/65579759/…