manubb / Leaflet.PixiOverlay

Bring Pixi.js power to Leaflet maps
MIT License
463 stars 85 forks source link

Use of Z-order #43

Closed TimHaerkens closed 4 years ago

TimHaerkens commented 4 years ago

I am drawing 30.000 markers on the map but the zorder seems to be random or at least the order they are added to the container. I am giving them a property called zOrder based on their Y position on the map but there doesn't seem to be a way to use this property.

Screenshot_1

Pixi documentation talks about a sortChildren function and the property zOrder I talked about. Is there a way to change the render order of the sprites?

TimHaerkens commented 4 years ago

I made a function to order the sprites based on the zOrder property I give them. I just change the order of the children in the container children array and rerender the pixi layer.


let children = pixiLayer.utils.getContainer().children;
pixiLayer.utils.getContainer().children = children.slice().sort(function (a, b) {
     a = a.zIndex;
     b = b.zIndex;
     return a === b ? 0 : a > b ? 1 : -1;
});
pixiLayer.utils.getRenderer().render(pixiLayer.utils.getContainer());