Custom implementation of viewer the vector-OSM (OpenStreetMap) files using jquery (reading xml) and threejs (visualize graphics).
Load your OSM-file to web-space in https://georggrebenyuk.github.io/osm.three.js/, and wait file's parsing. Enjoy!
When pick the object in scene, in browser's console you can see the attributes and tags for OSM-object.
On large areas camera may be not zoomed (use small models). Some objects's graphic may be not visualized.
- Because all OSM's content are stored in WGS-84 coordinates (geodetic latitude and longitude) script convert original coordinates to Mercator's projection using simple equations;
- Each OSM file contains block 'bounds' where are stored BBox for data in file. Coordinates transforming to Mercator projection and calculated the center of BBox. The ThreeJS's Scene now placing in that center and all OSM-nodes coordinates are summarize with Center's coords x -1 (to getting as soon as smaller values);
- There are three data types in OSM file:
node(pointed-objects),way(linear or polygonal objects (if line is closed)) andrelation(polygon with inner contour, mupltipolygon and other geometry collections). OSM elements are visuzlized if it's have at least one tag (properties); in other cases those elements using as auxiliary items for create geometry of other items;
Below lists a THREEJS's types for each case:
- node -> THREE.SphereGeometry();
- way (no closing) -> THREE.Line();
- way (closing, building = true)and relation (building = true) -> THREE.Mesh(THREE.ExtrudeGeometry());
- way (closing, building = false) -> THREE.Mesh(THREE.ShapeGeometry());
- Fix scene clipping throw camera (for large scenes);
- Adding the procedure instead try/catch for checking, if outer polygon are contains the inner polygon;
- Possibility to load multiple files;
- Fixing the problem, why some geometries will not visualized;
The open-source project bim.three.js and it's author egghunters. I'm a new in JS and used project's materials as template for that repository.