使用 pixjs 进行多边形渲染

Question

我正在尝试在移动设备上显示 6000 多个多边形。 目前，我正在使用 d3.js 库对 Android WebView 中的 SVG 路径进行此操作。 它有效，但我必须处理性能问题，当我拖动地图或缩放时，我的地图变得非常滞后。

我现在的想法是尝试使用 pixijs。我的数据最初来自 ESRI Shapefiles。我将这些 Shapefile 转换为 GeoJSON，然后再转换为 SVG。我的顶点数组看起来像这样，我试图将其传递给 drawPolygon 函数

0: 994.9867684400124 1：22.308409862458518 2：1042.2789743912592 3：61.07148769269074

但是当我尝试渲染这些多边形时，什么都没有显示。这是我的代码：

        var renderer = PIXI.autoDetectRenderer(1800, 1800, { backgroundColor: 0x000000, antialias: true });
        document.body.appendChild(renderer.view);

        var stage = new PIXI.Container();
        var graphics = new PIXI.Graphics();

        var totalShapes = feat.features.length; 

        for (var i = 1; i <= totalShapes -1; i++) {

            var shape = feat.features[i];
            var geometry = shape.geometry.bbox;

            graphics.beginFill(0xe74c3c);
            graphics.drawPolygon([ geometry]);
            graphics.endFill();
            stage.addChild(graphics);
            renderer.render(stage);

         }

有人可以帮助我或可以建议我不同的方式吗？

Answer 1

我还没有看到初始化 pixie 项目的这种方式。

通常您将应用程序添加到 html 文档中，例如：

  var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

如果您这样做，您可以将绘制调用添加到应用程序的设置中：

app.loader.load(startup);

function startup()
{
    var g = new PIXI.Graphics();
    g.beginFill(0x5d0015);
    g.drawPolygon(
        10, 10, 120, 100, 120, 200, 70, 200
    );
    g.endFill();

    app.stage.addChild(g);
}

这将渲染多边形一次。