Question

我试图在画布上为我的数组中的每个元素绘制rects。对于定位，我使用元素的经度和纬度值。

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

commit

编辑：来自@le_m的解决方案帮助了我很多，我实施了一个像他建议的过滤器：

sqlite3

过滤器似乎无法正常工作我做错了什么？

Answer 1

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

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

Answer 2

我建议计算所有数据点的边界框或边界矩形，并拉伸该边界矩形以填充整个画布：

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函数最终绘制给定画布上下文ctx上的所有数据点。从所有数据点坐标中减去偏移（边界矩形的左侧和顶部位置）。这可以保证所有数据点坐标都是正数且大于0。随后，缩放数据点坐标以拉伸整个画布，同时保持纵横比。

在画布上绘制数组元素的纬度，经度

2 个答案: