Comments (3)
I have the same problem!
It will be great to create an example with polylines. I'm working with ur example of french cities. I have got 10000 point and it is necessary to connect them with lines.
Now I did smth like this:
for (let key = 0; key < value.length; key++){
let coords = project([value[key].lat, value[key].lon]);
let index = 0;
let markerSprite = new PIXI.Sprite(textures[index]);
var lineLatLngs = (value[key+1])
? [[value[key].lat, value[key].lon], [value[key+1].lat, value[key+1].lon]]
: [[value[key].lat, value[key].lon], [value[key].lat, value[key].lon]];
projectedLineCoords = lineLatLngs.map(coords=>{
return project(coords)
});
let line = new PIXI.Graphics();
line.lineStyle(3 / scale, 0x3388ff, 1);
line.x = projectedLineCoords[0].x;
line.y = projectedLineCoords[0].y;
projectedLineCoords.forEach(function(coords, index) {
if (index == 0) line.moveTo(0, 0);
else line.lineTo(coords.x - line.x, coords.y - line.y);
});
markerSprite.textureIndex = index;
markerSprite.x0 = coords.x;
markerSprite.y0 = coords.y;
markerSprite.anchor.set(0.5, 0.5);
let tint = d3.color(value[key].color);
markerSprite.tint = 256 * (tint.r * 256 + tint.g) + tint.b;
container.addChild(markerSprite);
container.addChild(line);
markerSprites.push(markerSprite);
lines.push(line);
markerSprite.dcId = value[key].dcId;
}
But the problem is how to redraw lines when i change zoom.
Thank u fpr ur lib.
from leaflet.pixioverlay.
Hi.
As @vito2005 suggested, you can use PIXI.Graphics
to draw lines.
If you want stroke width to be independant of zoom value, you have to redraw the polyline when zoom changes. (You should avoid to reproject the points and you can use a different Graphics
at each zoom level and store the Graphics
container in a cache object so that you avoid computing twice the same thing.)
Another possibility is to use graph-draw which has demos displaying polylines and graphs on a leaflet map.
For adding arrows, you may use rotated sprites.
(Sorry no demo and not much time for all these things right now.)
from leaflet.pixioverlay.
@vito2005 did you manage it? Could you share some sample if so?
from leaflet.pixioverlay.
Related Issues (20)
- Moving markers HOT 1
- collision detection with variable size markers - keep sizes constant HOT 2
- Export map with pixi overlay HOT 3
- Render stage to a texture
- Remove and add a new layer
- 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
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.