Question

我需要绘制大量的矩形（可能高达数百万），这些矩形位于世界各地。我想知道什么是实现最佳性能的最佳方法。我的要求是：

所有项目都是矩形（不是正方形），大小和颜色相同
虽然
他们有不同的固定位置 - 他们不移动
矩形需要可选择
他们可能需要根据当前的缩放级别进行缩放（以使它们看起来像地面上的真实物体）
使用webgl渲染器

我试过的目标：

const features = R.map(
    (i) => {
        // [...] calculate `coords` and `rotation`
        const point = new ol.geom.Point(coords);
        const feature = new ol.Feature(point);
        feature.__angle = rotation;
        return feature;
    },
    R.range(0, count /* lots of them! */)
);

const sheetStyle = new ol.style.Style({
    image: new ol.style.Icon({
        size: [5, 8], // shape of rectangle
        src: 'color.png' // 1×1px image
    })
});

const vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({ features }),
    preload: Infinity,
    updateWhileAnimating: true,
    updateWhileInteracting: true,
    style: (feature, resolution) => {
        const image = sheetStyle.getImage();

        // TODO: is there a way to only have to do this once?
        image.setRotation(feature.__angle);

        // scale according to zoom level
        image.setScale(0.3 / resolution);

        return sheetStyle;
    },
});

我想知道ol3是否正在进行任何类型的优化。

是否将几何合并为一个？
它只显示地图可见部分的项目吗？
由于所有项目都相同，有没有办法使用实例化？

相关：为了获得更好的性能，我只创建了一个我正在重用所有项目的样式对象。但是我需要在每个上面设置一个旋转，这就是我使用样式函数的原因。一旦设定，旋转将不再改变。是否有办法每帧都调用样式函数？

我也在考虑使用热图图层来降低缩放级别，然后在用户放大时切换到矢量图层。

如果有人能给我提示整体性能提升，那就太棒了。

绘制了许多相同的特征 - 最好的方法是什么？

0 个答案: