Рендеринг полигонов с pixijs - PullRequest
Новая
       43

Рендеринг полигонов с pixijs

0 голосов
/ 29 мая 2019

Я пытаюсь отобразить более 6000 полигонов на мобильном устройстве.В настоящее время я делаю это с путями SVG в Android WebView, используя библиотеку d3.js.Это работает, но мне приходится иметь дело с проблемами производительности, моя карта становится очень запаздывающей, когда я перетаскиваю карту или увеличиваю ее.

Моя идея теперь состоит в том, чтобы попробовать то же самое с pixijs.Мои данные исходят из шейп-файлов ESRI.Я конвертирую эти шейп-файлы в 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);

         }

Может кто-нибудь мне помочь или предложить другой способ?

1 Ответ

2 голосов
/ 29 мая 2019

Я не видел такой способ инициализации проекта 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);
}

Рендеринг полигона будет выполнен один раз.

...