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

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

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

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);

const test2=test.filter（{latitude，longitude}）=>latitude！=null
&&经度！=null）；
函数getBoundingRect（test2）{
设左=无穷大，右=无穷大；
设顶部=无穷大，底部=无穷大；
for（设test2的{纬度，经度}）{
如果（左>纬度）左=纬度；
如果（顶部>经度）顶部=经度；
如果（右<纬度）右=纬度；
如果（底部<经度）底部=经度；
}
返回{x:left，y:top，width:right-left，height:bottom-
顶部}；
}
函数图（ctx，test2）{
设boundingRect=getBoundingRect（test2）；
让scale=Math.min（canvas.width，canvas.height）；
for（设test2的{纬度，经度}）{
设x=（纬度-boundingRect.x）/boundingRect.width*
规模
设y=（经度-boundingRect.y）/boundingRect.height*
规模
ctx.fillStyle=“rgba（65105225,0.2）”；
ctx.fillRect（x-5，y-5，4，4）；
}
}
绘制（ctx，测试2）；

---

过滤器似乎不工作我做错了什么

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

ctx.beginPath（）；
ctx.lineWidth=“10”；
ctx.strokeStyle=“蓝色”；
ctx.rect（50,50150,80）；
ctx.stroke（）您可能没有初始化路径。
尝试插入此代码并修补以下值：


ctx.beginPath（）；
ctx.lineWidth=“10”；
ctx.strokeStyle=“蓝色”；
ctx.rect（50,50150,80）；
ctx.stroke（）我建议计算所有数据点的边界框或边界矩形，并拉伸该边界矩形以填充整个画布：


函数getBoundingRect（数据）{
设左=无穷大，右=无穷大；
设顶部=无穷大，底部=无穷大；
for（让数据{纬度，经度}）{
如果（左>纬度）左=纬度；
如果（顶部>经度）顶部=经度；
如果（右<纬度）右=纬度；
如果（底部<经度）底部=经度；
}
返回{x:left，y:top，width:right-left，height:bottom-top}；
}
功能图（ctx、数据）{
设boundingRect=getBoundingRect（数据）；
让scale=Math.min（canvas.width，canvas.height）；
for（让数据{纬度，经度}）{
设x=（纬度-boundingRect.x）/boundingRect.width*比例；
设y=（经度-boundingRect.y）/boundingRect.height*比例；
ctx.fillRect（x-5，y-5，10，10）；
}
}
让数据=[
{“城市”：“纽约”，“经度”：-73.935242，“纬度”：40.730610}，
{“城市”：“纽约”，“经度”：-74.044502，“纬度”：40.689247}，
{“城市”：“纽约”，“经度”：-74.02019，“纬度”：40.578912}，
{“城市”：“纽约”，“经度”：-73.992833，“纬度”：40.634345}，
{“城市”：“纽约”，“经度”：-74.120332，“纬度”：40.484633}
];
让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
绘制（ctx，数据）
我建议计算所有数据点的边界框或边界矩形，并拉伸该边界矩形以填充整个画布：


函数getBoundingRect（数据）{
设左=无穷大，右=无穷大；
设顶部=无穷大，底部=无穷大；
for（让数据{纬度，经度}）{
如果（左>纬度）左=纬度；
如果（顶部>经度）顶部=经度；
如果（右<纬度）右=纬度；
如果（底部<经度）底部=经度；
}
返回{x:left，y:top，width:right-left，height:bottom-top}；
}
功能图（ctx、数据）{
设boundingRect=getBoundingRect（数据）；
让scale=Math.min（canvas.width，canvas.height）；
for（让数据{纬度，经度}）{
设x=（纬度-boundingRect.x）/boundingRect.width*比例；
设y=（经度-boundingRect.y）/boundingRect.height*比例；
ctx.fillRect（x-5，y-5，10，10）；
}
}
让数据=[
{“城市”：“纽约”，“经度”：-73.935242，“纬度”：40.730610}，
{“城市”：“纽约”，“经度”：-74.044502，“纬度”：40.689247}，
{“城市”：“纽约”，“经度”：-74.02019，“纬度”：40.578912}，
{“城市”：“纽约”，“经度”：-73.992833，“纬度”：40.634345}，
{“城市”：“纽约”，“经度”：-74.120332，“纬度”：40.484633}
];
让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
绘制（ctx，数据）
由于样本数据的经度为负值，因此点
纬度*10，（lon+200）*2
远离画布-或者我遗漏了什么？你真的对画布进行了变换吗？@leu\m不，你是对的。我纠正了我的例子。我现在看到了元素，但缩放是导致我现在出现问题的原因。我不知道如何以可读的方式显示所有这些坐标，因为它们彼此如此接近。您可以计算所有点的边界矩形，并将该矩形投影到画布上，即拉伸边界矩形内的所有点以填充整个画布。这对你来说是个解决办法吗？此外，您是否要应用一些地图投影，例如？@le_m Yes，tanks接受该建议。不幸的是，我一点也不知道如何编写代码？不，我不想要墨卡托地图投影。@le_m你知道web上的教程，它展示了如何使用JS进行投影吗？因为你的样本数据的经度是负的，所以点
lat*10，（lon+200）*2
离画布很远，或者我遗漏了什么？