【问题标题】:Finding the minimum and maximum value from an array in a JSON File in p5.js从 p5.js 的 JSON 文件中的数组中查找最小值和最大值
【发布时间】: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)
}

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

【问题讨论】:

    标签: json max p5.js minimum


    【解决方案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 =&gt; 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 ...您将不得不做一些研究,尝试第一个实现如果您遇到困难,请发布另一个关于您无法解决的确切问题的问题。
    • 我认为像“如何在地图上显示位置”这样的问题可能会因为“太宽泛”而被关闭
    猜你喜欢
    • 2019-02-28
    • 2013-11-12
    • 2021-09-15
    • 2016-06-07
    • 2018-05-03
    • 1970-01-01
    • 2012-09-14
    • 2013-11-12
    相关资源
    最近更新 更多