Draw a line on openstreemap( via leaflet) and extrude something in threejs in this geo-viewer example?

[zxo102]

Hi there,
geo-viewer is an amazing example and I am learning it (in three-geo/examples/geo-viewer/io/).

I would like to add something onto both openstreemap via leaflet and threejs in this geo-viewer example. Any documentations or suggestions? It is really appreciated if a demo is available for the above purpose.

Also, It is hard to read app.min.js, where can I get the unminified version?

Thanks a lot.

ouyang

[j-devel]

Thanks for trying geo-viewer!

I would like to add something onto both openstreemap via leaflet and threejs in this geo-viewer example. Any documentations or suggestions?

three-geo doesn't have any specific API for interacting with Leaflet. So, I think you are likely to work on Leaflet and three.js independently.

For example, to render a polygon, follow two separate steps:

1. draw a GeoJSON-based polygon in Leaflet using its LatLng coordinates.
2. create a three.js object (by e.g. ShapeGeometry or ExtrudeGeometry) that represents the polygon in WebGL space using its (x, y, z) coordinates.

And, importantly, you can resolve the relationship between the two types of coordinates following this information.

Some related references:

• map-helper.js
• projection demo

Also, It is hard to read app.min.js, where can I get the unminified version?

You can find all the source files in the source directory.

[zxo102]

Hi, J-devel
Thanks for your reply. I have done 1. and 2. in two separate steps. I am playing mapbox with Add a GeoJSON line [https://jsfiddle.net/ozinfo/nt3ha9cp/] and 3d tubes with three.js [https://jsfiddle.net/ozinfo/xekjcg08/].

But I do like putting the two things together very much like your geo-viewer example: click the map and got 3d view in three-geo. Is that possible to "cut into" your app.min.js and put my map js (with leaftlet or mapbox) and 3d tubes js (with terrain) there?

I am studying your reference and see how far I can go.

[zxo102]

Just display those drill holes of a underground mine in three-geo and two maps via mapbox and leaflet. Next step is to connect the maps and to three-geo. J-devel, thanks a lot.