Comments (4)
Also: this is a wonderful tool -- thank you!
from city-roads.
Found a solution that doesn't consume as much CPU power as my original version. You can try it now, by loading a city, and then in the browser's developer tools, enter this command:
scene.queryLayer().lineWidth = 2; // Sets new width to lines.
from city-roads.
Thank you! I'd totally love to do this, but I don't know how to do it efficiently.
Right now it is not uncommon to have a road graph with 100,000+ segments, each encoded as a pair of coordinates (x, y)
.
To render segments I'm using gl.LINES
draw type, which is very fast, and needs just two points per segment.
The only way that I know how to add thickness to the line is via triangulation. We turn each line segment into a rectangle, and then split it into two triangles. This method would require much more memory and a little bit more pre-processing.
Even if we don't consider memory consumption a problem, there is another thing that I haven't solved yet. My current implementation of thick lines doesn't have smooth transition between connected segments, which gives very jagged experience on high zoom levels:
I'm learning webgl myself, and if there are some good tricks that could help us get thick lines in the most efficient manner - please share!
from city-roads.
Thanks for taking the time to respond, @anvaka ! I don't know much about webgl, I'm afraid. But I did notice that the SVG export is relatively easy to customize afterwards (by increasing the stroke-width of the <g>
wrapping around the paths).
from city-roads.
Related Issues (20)
- Map Scale HOT 1
- Allow a way to generate a map from pin point + radius.
- Filled areas with non closed boundaries
- Broken rendering of Venice, Italy roads
- OSM Error HOT 1
- [Feature Request] Add subway/train lines
- [Feature Request] Display city (area) boundaries
- [Feature Request] Add export HOT 2
- Possible to export/save settings for re-rendering later? HOT 1
- Configure fill?
- Waterways
- [Feature Request] Allow city-roads read local OSM file to avoid mass network request HOT 3
- OSM Error HOT 1
- hhh
- Differing paths in SVG export compared to OSM data
- Bad map loading experience
- OSM Error HOT 1
- OSM Error HOT 1
- OSM Error HOT 1
- OSM Error HOT 1
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 city-roads.