Openlayers 使用 140k 功能降低性能答案

【问题标题】：Openlayers slow performance with 140k featuresOpenlayers 使用 140k 功能降低性能
【发布时间】：2021-07-27 10:53:21
【问题描述】：

我的 web 应用程序上有一个地图，它加载一个 GeoJSON 文件以在地图上显示属性，这包含 140k 个功能。

当地图缩小时，性能很慢，我正在寻找如何改进这一点的建议。

我正在使用开放层 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);
});

【问题讨论】：

您是否尝试过在图层而不是功能上设置样式？一般来说，我建议在图层上设置一个 minZoom，因为无论如何没人能真正看到 140k 的特征。集群源也可能有所帮助。
我已将 minZoom 设置为第一次尝试，因为它在放大时效果更好。我将考虑将样式设置为图层而不是功能，看看是否也有帮助。

标签： jquery openlayers openstreetmap geojson openlayers-3

【解决方案1】：

我不确定这里是否有一种简单的方法可以大幅提高性能。

我们在我的公司所做的是将结果分组到基于距离的函数上。这会减少点的数量，实际上会大幅添加到地图中。

您可以在放大地图时获取更精细的数据。这样做时，您可以删除已添加的点，并用您现在获得的更细粒度的数据替换它们。

但是，正如我所说的“没有简单的方法”，这也意味着，您应该根据地图上视图的当前位置获取数据 - 两者都需要正确计算数据，而不仅仅是普通的 .json 对象。

编辑：

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

这些是当前版本的文档，但我记得你可以在GeoJson format的构造函数中传递featureProjection和targetProjection，所以你不需要在添加特性后手动转换它们

【讨论】：