在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

您可能没有初始化您的路径。尝试插入此代码并修改值：

ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

Answer 2

我建议计算所有数据点的边界框或边界矩形并拉伸该边界矩形以填充整个 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。随后，数据点坐标被缩放以拉伸整个canvas，同时保持纵横比。

在canvas上绘制数组元素的纬度、经度

Drawing latitude, longitude of array elements on canvas

javascript

arrays

data-visualization

key-value