Question

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

让我们说我想在正方形网格中绘制纽约市元素的出现。

由于这些元素的纬度和经度略有不同，我不得不使用缩放来给出我想要绘制一些空间的部分（所以它看起来不像混乱的群集）。因此，我将rect()的x和y乘以一个因子。

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

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

for (var i = 0; i < array.length; i++) {
    var lat = array[i].latitude;
    var lon = array[i].longitude;

    ctx.rect(lat*10,(lon+200)*2, 4, 4);
    ctx.stroke();
}

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

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

现在它没有显示任何内容，我也不知道我做错了什么......

我是否使用正确的方法绘制（方形）网格？

Answer 1

您的代码与我的完全一样。为了测试它我指定了一个形式的数组：

var array = [{latitude: 1.2, longitude: 1.3}]

也许是你的html或数组没有你期望的格式。

选中此示例：https://codepen.io/anon/pen/mwyLMg

数据可视化：绘制网格中的值的出现

1 个答案: