Javascript 传单JS映射中的大JSON URL加载太慢

警告：这里是新手

我正在用PHP建立一个房地产网站。我现在通过一个全是JavaScript的页面JS添加了一个地图视图。我有我的地图设置和所有的属性来正确。我的问题是页面加载大约需要17秒。它只加载大约500个属性，而不是json url中提供的2000个属性。我相信它正在超时，因为json数据非常大（30mb）

快速填充地图的正确方法是什么？这是我的密码：

var url =
  "https://api.bridgedataoutput.com/api/v2/OData/actris/Property/replication?access_token=(TokenHere)&$top=2000";
var map = L.map("map", { tap: false }).setView([30.26, -97.74], 11);
var markers = L.markerClusterGroup();
$(document).ready(function () {
  $.ajax({
    url: url,
    dataType: "json",
    error: function () {
      console.log("JSON FAILED for data");
    },
    success: function (results) {
      const numberFormatter = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        minimumFractionDigits: 0,
      });
      var markers = L.markerClusterGroup();
      var cartItemsList = document.getElementById("cartItemsList");
      results.value.forEach(function (element) {
        //cartItemsList.insertAdjacentHTML( 'beforeend',"<li>" + element.UnparsedAddress + " : " + element.Longitude+ " : " + element.Latitude+ " </li>");
        var marker = L.marker([element.Latitude, element.Longitude]).bindPopup(
          '<a href="property.php?id=' + element.ListingId +
            '"><div class="card"><img class="card-img-top" src="' + element.Media[0].MediaURL +
            '" style="height:160px;max-height:160px;object-fit: scale-down;"><div class="d-inline-flex p-2 justify-content-between align-items-start"><div class="rp-1 bd-highlight">' +
            element.StreetNumber + " " + element.StreetName + " " +
            element.StreetSuffix + "<br>" + element.City + ", " +
            element.StateOrProvince + " " + element.PostalCode +
            '</div><div class="lp-1 bd-highlight" style="text-align: right;">' +
            numberFormatter.format(element.ListPrice) +
            " <br> ID " + element.ListingId +
            "</div></div></div></a>"
        );
        markers.addLayer(marker);
        map.addLayer(markers);
      }); // end of forEach
    }, // end of success fn
  }); // end of Ajax call
}); // end of $(document).ready() function

L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=my_mapbox_access_token",
  {
    maxZoom: 18,
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: "mapbox/streets-v11",
  }
).addTo(map);

markers.addLayer(marker);
map.fitBounds(markers.getBounds());

var-url=
"https://api.bridgedataoutput.com/api/v2/OData/actris/Property/replication?access_token=（此处为代币）和$top=2000”；
var-map=L.map（“map”，{tap:false}）.setView（[30.26，-97.74]，11）；
var markers=L.markerClusterGroup（）；
$（文档）.ready（函数（）{
$.ajax({
url:url，
数据类型：“json”，
错误：函数（）{
log（“数据的JSON失败”）；
},
成功：功能（结果）{
const numberFormatter=新的Intl.NumberFormat（“en-US”{
风格：“货币”，
货币：“美元”，
最小分数位数：0，
});
var markers=L.markerClusterGroup（）；
var cartItemsList=document.getElementById（“cartItemsList”）；
results.value.forEach（函数（元素）{
//cartItemsList.insertAdjacentHTML（'beforeend'，“
”+element.UnparseAddress+”：“+element.Longitude+”：“+element.Latitude+”）：“+element.Latitude+”
”；
var marker=L.marker（[element.Latitude，element.Longitude]）.bindpoop(
'"
);
markers.addLayer（marker）；
添加图层（标记）；
})；//forEach的结尾
}，//成功的终点fn
})；//Ajax调用结束
})；//$（document）.ready（）函数的结尾
蒂莱耶(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问\令牌=我的\映射框\访问\令牌“，
{
maxZoom:18，
归属：
'映射数据©；贡献者，'+
“图像”，
id:“地图盒/街道-v11”，
}
).addTo（地图）；
markers.addLayer（marker）；
map.fitBounds（markers.getBounds（））；

很可能存在两个性能瓶颈：

当加载30MB的数据时，我希望在大多数连接上都需要几秒钟的时间，但对于2000个功能来说，它却异常沉重

将大量标记添加到MarkerClusterGroup中时，如果您单独这样做，且MCG位于地图上，它将执行大量计算，延迟渲染几秒钟。使用（请注意末尾的s）一次所有标记的数组：

批量添加和删除标记

addLayers

和

removeLayers

是用于添加和删除标记的批量方法，在批量添加/删除标记时，应优先使用单个版本。每个版本都采用一组标记

在您的情况下，它可能类似于：（在您的成功回调中）

const arrayOfMarkers=results.value.map（元素=>
L.标记（[element.Latitude，element.Longitude]）.bindPopup（/*etc.*/）
);
常量mcg=L.markerClusterGroup（）；
mcg.addLayers（阵列标记器）；
麦加·阿多（map）；

---

至于显示的功能数量之间的差异，可能是由于计算延迟，但我怀疑您可能没有收到您认为的那么多功能：只需记录

results.value.length

，以确保。

您显示的代码显然不完整，尤其是在成功回调部分，这可能有助于make确定你的问题不是从那里来的。你是如何检查你实际上收到了2000个功能，并且只显示了500个功能的？您好，我没有考虑令牌。我删除了它，得到了一个新的。我可以在网页中加载json数据，看到它包含了2000个结果。根据发布者的规则，它的上限是这个。我在m上使用集群y地图，可以看到总标记是493。我相信它停在那里是因为传单中有一个超时规则。而且…我只包含了我代码的连接部分。我现在已经更新了它以包含整个页面。唯一缺少的是标题。我建议深入研究占用这17秒的内容。从阅读@IvanS开始anchez谢谢你的提示。ghybs的回答似乎解决了时间问题。这帮了大忙！不过我似乎仍然有一点问题。如果我保持弹出窗口的原样，并包含每个弹出窗口的照片，则加载大约需要3秒钟，但如果我尝试加载超过465，则根本不会加载任何内容…没有标记或群集。如果我删除了这些照片，我将无法加载所有2000个标记。我很好奇，如果我尝试只加载可见的地图而不是整个2000个json结果，是否有意义。我一直在尝试查找有关如何执行此操作的信息，但我一无所获。这是可以做到的吗？谢谢你的反馈。我不确定我是否遵守了下面是您的评论，很抱歉（特别是“如果我删除照片，我将无法加载所有2000个标记”部分）。它可能更适合作为一个新问题，提供有关该弹出问题的更多详细信息。如果可能，请提供一个复制示例。同样奇怪的是，您的服务在列表中发送大量图片，而不是将列表与每个功能的大量详细信息分开。我在此处创建了一个新问题：