Comments (5)
Hi.
First, i don't know if drawing millions polygons is possible. Please let me know if you succeed!
Second, in order to give you a precise answer, i need to know if you want to change color on click to show the focused polygon. If this is the case, maybe that you don't need to change the color of the polygon just like in this demo: when a polygon is clicked on, i draw another SVG Leaflet polygon with transparency over the focused polygon.
Anyway, the presidential election demos are a good starting point for your target. I can provide you a simplified demo with a minimal set of features: only polygons with no border and color change on click.
Tell me if you think this can help.
from leaflet.pixioverlay.
Hi Manual,
i think the idea of drawing with Leaflet polygon on selected item will make the browser crash if i select [multi selection] around 20k polygons.
Is there any possibilities to get the event on the Pixi.Polygon , i already checked with hit area.
I cant use rbush in our application..
from leaflet.pixioverlay.
You do not give me enough information to obtain a precise answer...
I do not think that you can click 20k times to select 20k polygons so:
- are polygons grouped in features so that a click on a polygon select the complete feature group?
- are you planning to use rectangular selection?
- something else?
The SVG trick can be implemented within the PixiOverlay layer by adding the selected polygons in a PIXI.Container
by the way.
from leaflet.pixioverlay.
All polygons are in same pixiContainer .
var pixiContainer = new PIXI.Graphics();
in your example you used 2 types of polygon drawing used.
if Single Polygon then drawing with PIXI.Polygon(coords) and container.drawPolygon(drawing);
if Multipolygon then var drawing = new PIXI.Graphics(), lines & container.addChild(drawing);
in the case of multipolygon i can access the events on each polygon by
drawing.interactive = true;
drawing.buttonMode = true;
drawing.on('click', function (e) {
//////
});
and also i can change the color by updating dirty and cleardirty properties
My question is . how we can do the same thing for the in the single polygon by rawing with PIXI.Polygon(coords) and container.drawPolygon(drawing);
And we are using rectangle selection,circle selection, polygon selection on Leaflet
from leaflet.pixioverlay.
Have you tried:
pixiContainer.interactive = true;
pixiContainer.buttonMode = true;
pixiContainer.on('click', function (e) {
//////
});
?
(I do not know if you can easily find which polygon is clicked on with this.)
You can also add each simple polygon in the same way you add multipolygons.
Concerning selection, i do not know if it is easy to find which polygons intersect a rectangle, a circle or a polygon with PIXI. The straightforward way i can think of is using rbush with rectangular selection and use bounding boxes for circles and polygons. With this, you will get an overselection that can be filtered.
from leaflet.pixioverlay.
Related Issues (20)
- Marker Assets Loading
- How to set up with Typescript (`Uncaught TypeError: PIXI.utils is undefined`) HOT 2
- BUG: Library doesn't work with latest version of leaflet. HOT 4
- WebGL: CONTEXT_LOST error HOT 1
- Stop propagation HOT 1
- Change the order and style of multiple pixi overlays after adding to the map
- Add support for PixiJS@7 HOT 6
- Add a Geojson in the map HOT 3
- What is included in the example.min.js at many-markers example? HOT 1
- There is way to add a interactive polygon and a marker in the same PIXI Conteiner? HOT 5
- examples HOT 4
- Using Vue3 HOT 1
- PIXI v7 events HOT 1
- Help with custom coordinates HOT 8
- Resolved, texture image not loading HOT 1
- Error after updating the Pixi version HOT 3
- Adapting Pixi to Openlayers
- Unable to render large (~18mb) multipolygon (?)
- Adding type definitions for L.pixiOverlay HOT 2
- Pixi 8 support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.pixioverlay.