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

Question

我正在尝试通过传单中的画布渲染器渲染包含大约 3000 个多边形的地图，它在我的 PC 上运行良好，但是当我在 android 设备或 i-pod 上测试它时它非常慢（有时甚至崩溃）。我也尝试使用 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

First I doubt the cause is the input format. Browsers may use hardware acceleration behind the scenes for the Canvas element, if they do not then you will experience performance degradation.

Canvas->Browser->OS->Hardware, so this will depend on a lot of parameters...

I am not expert in Android but this issue applies to browser/device combination. See these links:

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

Html5 is interesting but do not expect native performance on every device yet, it will probably be better in a few years.