用 pixijs 渲染多边形

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

我没见过这种初始化小精灵项目的方法。

通常您将应用程序添加到 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);
}

这将渲染一次多边形。

用 pixijs 渲染多边形

Polygon rendering with pixijs

svg

polygon

geojson

pixi.js