大 JSON URL 在 LeafLet JS 地图中加载太慢

Question

警告：这里是新手

我正在 PHP 建立一个房地产网站。我现在通过 LeafLetJs 添加一个地图视图，全部 JavaScript。我有我的地图设置，所有属性都正确输入。我的问题是页面加载大约需要 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());

Answer 1

很可能有 2 个性能瓶颈：

加载 30MB 的数据时，我预计大多数连接都需要几秒钟。但它仅用于 2,000 个功能就很重了。
在MarkerClusterGroup中添加大量Marker时，如果单独添加且MCG在地图上，会进行大量计算，导致渲染延迟数秒。使用 addLayers method （注意最后的 s ）一次与所有标记的数组：

Bulk adding and removing Markers

addLayers and removeLayers are bulk methods for adding and removing markers and should be favoured over the single versions when doing bulk addition/removal of markers. Each takes an array of markers.

在你的情况下它可能是这样的：（在你的成功回调中）

const arrayOfMarkers = results.value.map(element => 
  L.marker([element.Latitude, element.Longitude]).bindPopup(/* etc. */)
);
const mcg = L.markerClusterGroup();
mcg.addLayers(arrayOfMarkers);
mcg.addTo(map);

至于显示的特征数量之间的差异，可能是由于计算延迟造成的，但我更怀疑你收到的特征可能没有你想象的那么多：只需登录 results.value.length 以确保。

Answer 2

原来 json URL 加载时间过长。我能够使用 select 规则并且只拉回我需要的字段。现在地图在几秒钟内加载 2000 个结果。

大 JSON URL 在 LeafLet JS 地图中加载太慢

Large JSON URL loading too slowly in LeafLet JS Map

javascript

json

leaflet