Jump to content

Problem with render sprites in ParticleContainer - leaflet.pixiOverlay


corvinus15
 Share

Recommended Posts

I'm currently looking for a way to represent a large number of points, following the example of 'particles' and 'particles-patched' ... these work very well for me, they allow me to zoom in and see the points very well.

Example particles

example particles-patched

1302571029_Captura(1).thumb.png.a899cc6c15830de92f852fa54a48ed7b.png

 

By changing the code a little to get the same result as in the example but with the most real coordinates and quantities, the rendering fails me and I get the following:

44178980_Captura2(1).thumb.png.1e752f2b756aa4f878adb94eeeacec7c.png

  1. When I zoom, the points disappear.
  2. Generate a very different shape than the texture I'm sending you (the same texture I use for the first image)

with this function I generate the texture for both cases:

generateCircleTexture(radius) {
        const gfx = new PIXI.Graphics();
        const tileSize = radius * 3;
        const texture = PIXI.RenderTexture.create(tileSize, tileSize);
        gfx.beginFill(0x000000); // color base
        gfx.drawCircle(tileSize / 2, tileSize / 2, radius);
        gfx.endFill();
        this.rendererPixi.render(gfx, texture);
        return texture;
 }

this code create of containers

 this.pixiContainer = new PIXI.Container();
 const innerContainer = new PIXI.ParticleContainer(400000, {vertices: true});
 this.pixiContainer.addChild(innerContainer);

This is the route I do in the firstDraw for the example

markers.forEach(function(marker) {
   const projectedCenter = project([marker.latitude, marker.longitude]);
   const circleSprite = new PIXI.Sprite(that.texturePixi);
   circleSprite.x = projectedCenter.x;
   circleSprite.y = projectedCenter.y;
   circleSprite.center = projectedCenter;
   circleSprite.anchor.set(0.5);
   circleSprite.scale.set(invScale);
   innerContainer.addChild(circleSprite);
   cirlceSprites.push(circleSprite);
});

And this is the route that I already do with what I need

_.forEach(points.features, function (feature, position) {
     if (feature.geometry !== null) {
        _.forEach(feature.geometry.coordinates, function (point, posCoordinate) {
             const projectedCenter = project([point[1], point[0]]);
             const circleSprite = new PIXI.Sprite(that.texturePixi);
             circleSprite.x = projectedCenter.x;
             circleSprite.y = projectedCenter.y;
             circleSprite.center = projectedCenter;
             circleSprite.anchor.set(0.5);
             circleSprite.scale.set(invScale);
             innerContainer.addChild(circleSprite);
             cirlceSprites.push(circleSprite);
        });
     }
});
 

Do you have any idea what may be happening?

 
Link to comment
Share on other sites

Hello and Welcome to the forums!

Your case seems difficult. It might be ParticleContainer bug, i recommend to try add more attributes in second param in constructor.

Or it could be some limitation I forgot about :) code looks fine, if you want to optimize it in future - making your own Mesh twont spawn 400000 objects - it will help.

Link to comment
Share on other sites

Hello, thank you very much for your comment.

I really don't know what is happening, I'm going to see if it has to do with the coordinates, but I don't think so. Because when drawing points with a simple 'container' it shows them well, but when passing to 'particleContainer' it fails

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...