内容简介：Render every single road in any city at once:The data is fetched from OpenStreetMap using
city-roads
Render every single road in any city at once: https://anvaka.github.io/city-roads/
How it is made?
The data is fetched from OpenStreetMap using overpass-turbo API . While that API is free (as long as you follow ODbL licenses), it can be rate-limited and sometimes it slow. After all we are downloading thousands of roads within an area!
To improve the performance of download, I indexed ~3,000 cities with populating larger than 100,000 people and stored into a very simple protobuf format. The cities are stored into a cache in this github repository .
The name resolution is done by nominatim - for any query that you type into the search box it returns list of area ids. I check for the area id in my list of cached cities first, and fallback to overpass-turbo if area is not present in cache.
Limitations
The rendering of the city is limited by the browser and video card memory capacity. I was able to render Seattle roads without a hiccup on a very old samsung phone, though when I tried Tokyo (with 1.4m segments) the phone was very slow.
Selecting area that has millions of roads (e.g. a Washington state) may cause the page to crash even on a powerful device.
Luckily, most of the cities can be rendered without problems, resulting in a beautiful art.
Support
If you like this work and want to use it in your projects - you are more than welcome to do so!
Please let me know how it goes. You can also sponsor my projects here - your funds would be dedicated to more awesome and free data visualizations.
Local development
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
License
The source code is licensed under MIT license
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
