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添加功能后，所以你不需要手工改造他们