javascript - 在 Canvas 上绘制数组元素的纬度、经度

Question

我正在尝试在 Canvas 上为数组中的每个元素绘制矩形。对于定位，我使用元素的经度和纬度值。

我的数组看起来像这样，包含 50.000 个对象元素:

var modified_array = 
[{"city":"NYC","longitude":-73.935242,"latitude":40.730610},
 {"city":"NYC","longitude":-74.044502,"latitude":40.689247}]

编辑:@le_m 的解决方案帮助了我很多，我按照他的建议实现了一个过滤器:

const test2 = test.filter(({latitude, longitude}) => latitude != null 
              && longitude != null);

function getBoundingRect(test2) {
    let left = Infinity, right  = -Infinity;
    let top  = Infinity, bottom = -Infinity;

    for (let {latitude, longitude} of test2) {
        if (left   > latitude ) left   = latitude;
        if (top    > longitude) top    = longitude;
        if (right  < latitude) right  = latitude;
        if (bottom < longitude) bottom = longitude;
    }
    return {x: left, y: top, width: right - left, height: bottom - 
    top};
}

function draw(ctx, test2) {
    let boundingRect = getBoundingRect(test2);
    let scale = Math.min(canvas.width, canvas.height);

    for (let {latitude, longitude} of test2) {
        let x = (latitude  - boundingRect.x) / boundingRect.width  * 
        scale;
        let y = (longitude - boundingRect.y) / boundingRect.height * 
        scale;
        ctx.fillStyle = "rgba(65,105,225,0.2)";
        ctx.fillRect(x - 5, y - 5, 4, 4);
    }
}

draw(ctx, test2);

过滤器似乎不起作用我做错了什么？

Answer 1

我建议计算所有数据点的边界框或边界矩形，并拉伸(stretch)该边界矩形以填充整个 Canvas :

function getBoundingRect(data) {
  let left = Infinity, right  = -Infinity;
  let top  = Infinity, bottom = -Infinity;
  
  for (let {latitude, longitude} of data) {
    if (left   > latitude ) left   = latitude;
    if (top    > longitude) top    = longitude;
    if (right  < latitude ) right  = latitude;
    if (bottom < longitude) bottom = longitude;
  }
  return {x: left, y: top, width: right - left, height: bottom - top};
}

function draw(ctx, data) {
  let boundingRect = getBoundingRect(data);
  let scale = Math.min(canvas.width, canvas.height);
  
  for (let {latitude, longitude} of data) {
    let x = (latitude  - boundingRect.x) / boundingRect.width  * scale;
    let y = (longitude - boundingRect.y) / boundingRect.height * scale;
    ctx.fillRect(x - 5, y - 5, 10, 10);
  }
}

let data = [
  {"city": "NYC", "longitude": -73.935242, "latitude": 40.730610},
  {"city": "NYC", "longitude": -74.044502, "latitude": 40.689247},
  {"city": "NYC", "longitude": -74.020219, "latitude": 40.578912},
  {"city": "NYC", "longitude": -73.992833, "latitude": 40.634345},
  {"city": "NYC", "longitude": -74.120332, "latitude": 40.484633}
];

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

draw(ctx, data);

<canvas id="canvas" width="200px" height="200px"></canvas>

getBoundingRect(data) 函数计算边界矩形 - 即仍包含所有给定数据点的最小矩形。

通过遍历所有数据点并在发现点位于当前边界矩形之外时加宽矩形来找到边界矩形(左、上、右、下)。

draw 函数最终在给定的 Canvas 上下文 ctx 上绘制所有数据点。从所有数据点坐标中减去偏移量(边界矩形的左侧和顶部位置)。这保证了所有数据点坐标均为正且大于0。随后，缩放数据点坐标以拉伸(stretch)整个 Canvas ，同时保持纵横比。