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

编程问答 2022-05-31

问题描述

我有一个 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)
}

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

解决方法

您的代码中有一些无法正常工作的内容，让我们先看看：

  • 首先，在您的 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,minLong };
}

最后在 draw() 中，你可以对它们做任何你想做的事情，例如我只在画布上写它们：

function draw() {
    background(220);

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

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

我使用完整的代码创建了 this codepen，以便您可以查看各个部分如何协同工作。