manubb / Leaflet.PixiOverlay

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

Quadtree to detect event takes a lot of CPU #54

Closed Anckermann closed 3 years ago

Anckermann commented 3 years ago

I tried various different solutions that involves the usage of pixi listeners, but all seems to be ignored. I also tried to use L.leaflet-event-forwarder, but still the events aren't fired. So the use of a compiled QuadTree and then visit() it is essential to detect an event on the map and get the corrisponding marker. The thing is that compiling the QuadTree is computationally expensive (I'm working with 9000+ markers at time) and freezes the browser a lot. SInce I need to update some markers every minute, the Quadtree needs to be recompiled and that causes a poor User Experience . I also tried to execute the QuadTree work in each iteration with a timeout to let the browser breathe, but no luck. Is there actually some other way to detect a mouseover or click without the usage of a compiled quadtree? Thanks in advance.

acycliq commented 3 years ago

9000+ points do not sound too many, you might be able to do mouseovers and mouseclicks with plain leaflet (probably on a canvas renderer) If you want to stick with pixiOverlay, I was thinking to do it with kdbush. See this post, but as you will read further down an other member of the community did have a go but didnt work well for him

manubb commented 3 years ago

You can try rbush or kdbush, both can index points. If you need to update some points every minute, you should probably try rbush which allows to add/remove items dynamically.

Anckermann commented 3 years ago

You can try rbush or kdbush, both can index points. If you need to update some points every minute, you should probably try rbush which allows to add/remove items dynamically.

I tried rbush and worked like a charm for what I had to do. I'm still working on finding the perfect combination of marker bounding box + query bounding box, but the performance is outstanding.

I did a little benchmark with 7500+ markers at the moment of testing: performance Sure the Quadtree computation is for every zoom level, but rbush is still very perfomant.