Openlayers 使用 140k 功能降低性能

Question

我的 Web 應用程序上有一張地圖，它加載一個 GeoJSON 文件以在地圖上顯示屬性，其中包含 14 萬個要素。

當地圖縮小時，性能非常慢，我正在尋求有關如何改進的建議。

我正在使用開放層 4。

代碼如下：

var SolarData = "";
var solarLayer = new ol.layer.Vector();

//addWards
proj4.defs("EPSG:27700", '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717' +
    ' +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs');
ol.proj.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
ol.proj.get('EPSG:27700').setWorldExtent([-10, 49, 6, 63]);
ol.proj.get('EPSG:27700').setGlobal(false);
ol.proj.get('EPSG:27700').setGetPointResolution(function (resolution) { return resolution; });

var sprojection = new ol.proj.Projection({
    code: 'EPSG:900913'
});

var solarProjection = new ol.proj.Projection({
    code: 'EPSG:27700',
    units: 'm'
});

$.getJSON("/content/property_data.json", function (data) {

    SolarData = data;

    var solarsource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(SolarData),
    });

    var sfill = new ol.style.Fill({ color: 'rgba(1, 184, 170, 0)' });
    var sstyle = new ol.style.Style({
        fill: sfill,
        stroke: new ol.style.Stroke({
            color: '#212121',
            width: 2
        })
    });

    var solarFeatures = solarsource.getFeatures();
    for (var i = 0; i < solarFeatures.length; i++) {
        var feature = solarFeatures[i];
        feature.getGeometry().transform(solarProjection, sprojection);
        feature.setStyle(sstyle);
        feature.set('name', '');
    }

    solarLayer = new ol.layer.Vector({
        source: solarsource,
    });

    map.addLayer(solarLayer);



}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log("error " + textStatus);
    console.log("incoming Text " + jqXHR.responseText);
});

Answer 1

我不確定這里是否有一種簡單的方法可以大幅提高性能。

我們在我的公司所做的是根據基於距離的函數對結果進行分組。 這減少了實際添加到地圖中的點的數量。

您可以在放大地圖時獲取更精細的數據。 這樣做時，您可以刪除已經添加的點，並用您現在獲得的更細粒度的數據替換它們。

但是，正如我所說的“沒有簡單的方法”，這也意味着您應該根據地圖上視圖的當前位置獲取數據 - 兩者都需要對數據進行適當的計算，而不僅僅是簡單的 .json目的。

編輯：

您可以在此處查看有關 geojson 格式的文檔： https ://openlayers.org/en/latest/apidoc/module-ol_format_GeoJSON-GeoJSON.html

這些是當前版本的文檔，但我記得，你可以通過featureProjection和targetProjection中的構造GeoJson format添加功能后，所以你不需要手工改造他們