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);
}

这将一次渲染多边形。

用pixijs渲染多边形

1 个答案: