使用传单的画布渲染器渲染大型矢量图层的性能问题

Question

我正在尝试通过传单中的画布渲染器渲染包含大约 3000 个多边形的地图，它在我的 PC 上运行良好，但是当我在 android 设备或 i-荚。我也尝试使用 openLayers 2 和 openLayers 3 渲染它，但即使这些都运行缓慢。值得注意的是，当我使用上述三个渲染引擎渲染一个大约 800 个多边形的地图时，leaflet 在这三个引擎中运行得最快，但是当数量增加到 3000 时它会挂起并崩溃。我使用 WKT 格式输入我的数据。传单代码如下-

var wkt = new Wkt.Wkt();
        var geom;
        var feature;
        var typeWiseData;
for (var type in allData){
    typeWiseData = allData[type];
    for (var i=0; i<typeWiseData.length;i++){
        geom = typeWiseData[i]['geometry'];
        if (geom){
            try {
                wkt.read(geom);
                feature = wkt.toObject();
                feature.addTo(map);
            }
            catch(e){
                alert(e.message);
            }

        }
    }
}

有人可以建议我解决这个问题吗？我应该使用任何其他渲染引擎吗？我应该使用任何其他输入数据格式（如 geoJSON）吗？ 谢谢。

Answer 1

首先我怀疑原因是输入格式。 浏览器可能会在幕后为 Canvas 元素使用硬件加速，如果不这样做，您将体验到性能下降。

Canvas->Browser->OS->Hardware，所以这将取决于很多参数...

我不是 Android 专家，但这个问题适用于浏览器/设备组合。请参阅以下链接：

• Is html 5 canvas hardware accelerated on android chrome beta?
• Phone Android HTML5 Hardware Acceleration - Canvas

Html5 很有趣，但还不能指望每台设备都有原生性能，几年后可能会更好。