tentone / geo-three Goto Github PK
View Code? Open in Web Editor NEWTile based geographic world map visualization library for threejs
Home Page: https://tentone.github.io/geo-three/docs/
License: MIT License
Tile based geographic world map visualization library for threejs
Home Page: https://tentone.github.io/geo-three/docs/
License: MIT License
i need to get all tiles that are in viewspace. Where can i safe them to an array, if they are not already saved somewhere?
thanks in advance:
leo
Hi there, is the google maps provider listed in the example ( satellite + elevation ) ?
how can we use it ?
thank you
By reading the readme I'm not getting on how to actually use this library to turn map tiles into a material for my sphere buffer geometry.
I'm not getting on how to initialise the lib and then use it for myself. Can you please let me know any examples that'll give me clear understanding about it?
Hi! We're using geo-three for interactive maps.
Now that Google has opened up the 3D Tiles API (https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles?hl=en), I was wondering if you're planning to add support for that API?
That would be awesome! Thanks
hi tentone:
base scene: we wan't to make same mark on map by longitude and latitude 。some time longitude and latitude location is on the mountain 。datumsToSpherical just return plane coordinates [x,y]. and then the make sprite will be Obscured by the terrain mesh。
In my way: longitude and latitude => ESP900913[x,y,z] (y ===0 )[plane x y coordinates] =>tile[x+offset,y+offset, >14level ] =>get tile terrain image. =>get offset pixe data cal the height data . but there still has error by this way。
do you have same method by gpu or some other ?
look forward to your reply!!!
I want to load and implement terrain through geotiff data, but I don't know how to start. Can you give me some advice
Equirectangular projection
wouldnt it be better for planar projection/map to use Equirectangular coordinates:? this could even spare unnesscesary computation in spherical mode with a increased zoom/low fov by switching to planatary.
by switching to non-spherical coordinates i dont need to to convert and remap/interpolate the spherical coordinates for every single vertex of every element that i want to place/find on the planatary map.
->
"x = r λ cos(φ0)
y = r φ
This is simple equirectangular projection.In most cases, you'll be able to compute cos(φ0) only once, which makes subsequent computations of large numbers of points really cheap."
EPSG:900913
i guess you relate to EPSG4326:
"There are a few things that you are mixing up.
Google Earth is in a Geographic coordinate system with the wgs84 datum. (EPSG: 4326)
Google Maps is in a projected coordinate system that is based on the wgs84 datum. (EPSG 3857)
The data in Open Street Map database is stored in a gcs with units decimal degrees & datum of wgs84. (EPSG: 4326)
my problem is that 900913 is actually not listed on https://spatialreference.org/ ->** can be used to generate proj4 reference code like https://spatialreference.org/ref/sr-org/7483/proj4/ for absolute accurate coord.-to-cartesian-converion**
thanks again for the project. its really great!! im having problems with spherical geometry in react-fiber though...planning to publish a react-preset, but spherical, is just not working... anyway thanks for support!- leo
Hello, i am looking to use a french map provider for national data (IGN).
Can i and How can i use geo-three with that provider?
First of all: Thanks for a great project!
Second:
Please see screenshot below. Occasionally my custom handler wants to load tiles that are invalid.
I think this might be the reason for the white region seen. Can anyone point me in the right direction for a fix?
This is my Provider code(copied from this project).
export class OurOpenStreetMapsProvider extends GEOTHREE.MapProvider
{
constructor(address) {super();}
fetchTile(zoom, x, y)
{
return new Promise((resolve, reject) =>
{
var image = document.createElement("img");
image.onload = function(){resolve(image);};
image.onerror = function(){reject();};
image.crossOrigin = "anonymous";
//image.src = "https://tile.openstreetmap.org/10/546/321.png";
//image.src = "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + y + ".png";
image.src = mapserver + zoom + "/" + x + "/" + y + ".png";
});
}
}
This is one of the wrong tile urls:
I got your lib to run in my very specific mobile env and first thank you for that!
Your GPU height shader is pretty awesome!
Now the aim of my project is to get something like PeakFinder.
i already have the Three JS post processing effect using https://github.com/OmarShehata/webgl-outlines (which i need to change i guess to be able to use your height shader).
MeshBasicMaterial
or something. Is that possible?While trying to add the library to my app, I noticed that the npm package only contains javascript code and no typings. Is it intentional ? Do you plan to publish the types as well ? We definitely both see the benefits of coding the library in typescript, but this is also useful to use it in typescript.
Thanks a lot!
Hello, developer. First of all, thank you for developing such a user-friendly plugin. However, I have met some problems in specific use, and I hope you can answer them. I want to set the center position of the map, but I don't know how to operate it. When I read the development document, I found that the description in this part is not clear. I hope you can tell me how to set it.
Hi, first of all, Great Project here! Thank you !
I want to ask a question:how to load tiles with a resolution of 512 * 512 or 1024 * 1024?
Tiles are generated through geoserver service,and large resolution tiles are loaded to reduce the number of requests
Look forward to your reply,thanks in advance.
Line 5 in 5d8823c
In build folder we only have geo-three.js, geo-three.js.map, geo-three.module.js & geo-three.module.js.map. Due to this geo-three package will not be accessible when imported in Typescripts
Would you be open to migrating the lib to typescript?
I am on my way to do it in my fork but want to ask you first. Cause merging will get very hard if one is in JS and the other in TS
Hi
I've just done like
yarn create react-app --template typescript try-geo-three
yarn add geo-three
And then try to import * as foo from "geo-three"
and I'm getting:
error TS7016: Could not find a declaration file for module 'geo-three'. '/home/tom/dev/now/try-geo-three/node_modules/geo-three/build/geo-three.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/geo-three` if it exists or add a new declaration (.d.ts) file containing `declare module 'geo-three';`
4 import * as foo from "geo-three"
~~~~~~~~~~~
Found 1 error in src/App.tsx:4
This is with 0.1.0
There is a example
https://www.bilibili.com/video/BV1d5411V7Ap/
It is made by Cesium.js
Currently live demo says...
"You can test the live demo of the library running from the GitHub page"
and points to https://tentone.github.io/geo-three/examples/index.html
It should point to: https://tentone.github.io/geo-three/
hi tentone :
here is a great project :https://github.com/felixpalmer/procedural-gl-js ,the same GPU render terrian his most smooth。but it cant add three object where you like、
some suggestions:
1 geo-three cluld add a tiledate buffer 。
2 compatible the nasa.xyz's height image
3.reduce the tiledate request
geo-three will be more greate project 。
Hi there I'm looking for a way to add the map to a plane and then clip the plane to a set of map bound coordinates (the idea being to be able to rotate and pan around an area and visualise some below ground data). Is this supported by the library, I've been trying out multiple approaches and getting nowhere?
Hi!
Cool project! I was wondering if you are planning to integrate support for vector tiles, such as MVT?
For example, similar to the OpenLayers MVT format: https://github.com/openlayers/openlayers/blob/main/src/ol/format/MVT.js
Openstreetmap option does not work/load tiled images as there is a mismatch in the URL request from the library
An addition '/'
is added in the statement after this.address
which is causing an error
Hi, and thank you for this library which looks awesome!
I am just not sure from the readme whether the library supports the generation of a 3D terrain. Because from what I read, it is possible to provide a height map tileset, but I haven't been able to reproduce any 3D terrain in the demo. It is always a planar map.
Did I miss something ?
I am looking for something similar to Map33, but I prefer your coding style, focused on maintainability and of course written in TypeScript :)
Thank you!
Hello, first I would like to thank you for your work.
(everything working perfect with BingMapsProvider).
I'm having issuse to fetch google maps tiles
this is my code:
const googleProvider = new Geo.GoogleMapsProvider(GOOGLE_MAPS_API_KEY).
I saw the createSession fails, the google maps API key is valid with tiles enable.
Mabye I'm doing something worng? thanks for any help
** according to google maps docs: https://developers.google.com/maps/documentation/tile/roadmap
geo three createSession fetch:
const address = 'https://www.googleapis.com/tile/v1/createSession?key=' + this.apiToken;
what google shows:
"https://tile.googleapis.com/v1/createSession?key=YOUR_API_KEY"
curl -X POST -d '{
"mapType": "roadmap",
"language": "en-US",
"region": "US"
}'
-H 'Content-Type: application/json'
"https://tile.googleapis.com/v1/createSession?key=YOUR_API_KEY"
I think they have change the API address, I succeeded to fetch it from my browser and create session with the new adress
Hi,
This is a question and not a bug.
I'm currently loading a 3dtiles model and a Bing layer.
The model is a region model with the coordinates below
// [west, south, east, north, minimum height, maximum height]
-0.00010867585747044324
0.8990759032023482
0.00003249817050595483
0.8991635359312518
15.237850105389953
121.4680495094508
I want to place the model correctly on the bing Layer. In the ideal world, I think it might be possible to calculate the model's centre and then find that position on the Bing Layer.
Imagine the center of the model is lat/lng is 51.51356734838993, -0.008762004251769352, how can I move an object so it stays on the right place on top of the Bing layer? (red pin on the image)
Thank you
i test a EPSG:90913 Coordinates:
{
x: 399115.99667538225,
y: 6075329.634674081
}
It shows right in epsg.io. You can test at:
https://epsg.io/map#srs=900913&x=%20399115.99667538225&y=6075329.634674081&z=12&layer=streets
But in bingmap, it not same with epsg.io.
How do I integrate geo-three with a normal JS Project without NPM
Are there any examples of the providers example where one can switch to using the OrthographicCamera instead of the default PerspectiveCamera?
Tried to change the camera init code in examples/providers.js but without any luck.... .-/
Thanks for a great project!
Two questions here:
Hi José,
first off, thank you for this awesome library! It's wild that I never noticed this library up until now, this looks amazing 😄 So kudos and thanks!
I was wondering how to implement an overlay, for example icons or paths which are displayed on the map (as you see in Google Maps for example, with markers and routes, or icons for shops or sights). How should I approach this?
I could think of two three scenarios:
I normally am not the kind of person to use the Issues as a Q&A section, but I simply couldn't find any info on this in the README and would really love to use your library, so I thought I'd give it a shot, sorry to bother you :) Again, thank you for publishing this awesome library!
Best wishes
Niklas
Thank you for your great work!
I tried to update my version from 0.1.1 to 0.1.9, but i noticed a misplacement with 3d-tiles from three-loader-3dtiles after updateing to 0.1.2. On Cesium the 3d-tiles are correctly placed.
In both versions the 3D tiles have a wrong scale, but I think this problem comes from three-loader-3dtiles.
I would like to test your project but the example wont run.
Neither on your website nor when locally cloned.
Uncaught TypeError: Class constructor Wn cannot be invoked without 'new'
at MapHeightNodeShader.MapHeightNode [as constructor] (geo-three.js:794)
at new MapHeightNodeShader (geo-three.js:1339)
at new MapView (geo-three.js:1699)
at (index):143
```
1
I want to get a function,
param in : latitude longitude
out: MapView
not find it
2
prepare to modify MapView and MapPlaneNode
notice that MapPlaneNode need "level x y",(I just have latitude longitude)
so, use UnitsUtils.datumsToSpherical(la, lo) to convert
3
here is a mistake.
"SanFrancisco level = 7, x = 20, y = 49" is hard code
"SanFrancisco 37°48’0”N,122°25’0”W" is from web search engine
UnitsUtils.datumsToSpherical(37°48’0”N,122°25’0”W") is return {x: 272176.1549895539, y: 90124.50931675344}
not similar to x = 20, y = 49
hi, im trying to set this package up with react and fiber, but the tiles that are fetched have wrong coordinates (totally of grid like: "https://a.tile.openstreetmap.org/14/8193/8189.png". i really dont know what im doing wrong here.
maybe the wrong tiles are getting loaded due to zoomlevel, or the scale of the map which is ({"x":40030223.8575236,"y":1,"z":40030223.8575236})
the first tiles that are fetched are actually valid, but i guess they get overwritten. -> you can find a complete console log of the fetched tiles below.
Ive tried multiple aproaches:
A) using basic MapControls
https://pastesite.org/view/8628e33c
B) using cubeCamera and OrbitControls, without using mapControls
https://pastesite.org/view/6b900f11
console log of fetched tiles without zooming or panning:
https://pastesite.org/view/fc0e90de
Are there any discord servers where i can ask about such topics? I find it quite hard to get infos about threejs in combination with react...
also: osm is creating that weird tile with red text, not sure what its saying...
Thanks in advance <3 ,
leo
System: Ipad, iOS 15.6
Browser: Google Chrome
No errors in the console.
https://tentone.github.io/geo-three/index.html
Thank you!
MapNode.ts, loadData function,
this.material.map = texture;
Adding the following code will trigger a bug
this.material.transparent = true;
After zooming out, the map will become invisible, and even after zooming in, it will become invisible。
Additionally, if there are two layers, one is the image layer and the other is the annotation layer, how can these two layers be stacked together?
Thanks
You have published a really neat library where the results look very promising.
However I have just a remark, that the seams between the tiles are quite strong. There should be some interpolation be made between the tiles so that everything is much more fluid.
Like this recently developed library named map33.js does it within its own shader material (see code here.
Maybe that's something you could also try to include (or me in a PR ... haha)
hi tentone :
cause i need add three obj by mouse ,i need get the xyz Coordinates. on map .on planar mode : i add a plan for moue get the Coordinates of map . then we cloude get W84 Coordinates quick buy mouse .like espg.io do . that we clould add obj where you like.i it's a simple think .but make a greate change. But there is one small regret : on terrain mode we cloud not get the heightinfo.
const geometry = new THREE.PlaneGeometry(0.4e8,0.4e8,256,256);
const material = new THREE.MeshBasicMaterial( {color: 0xff0000,wireframe:true, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
plane.rotateX(Math.PI/ 2);
scene.add( plane );
If we can get elevation information, it will be more better. Do you have any suggestions?
I like this !!!
We can add some functions and examples, such as camera control,and post effect,I think you can see here, it is based on three. Js to do, but their goal is too far, custom post-processing is too complex, and the camera control is also very limited
Hi, first of all, Great Project here! Thank you guys!
This is easy to use and easily extendable.
One questions though, I want to make the map plane transparent.
So I've thought of modifying the Three Materials with { transparent: true, opacity: 0.5 }.
geo-three/build/geo-three.module.js
Line 294 in 9a688ee
Any suggestion on making the map plane semi-transparent and display correctly?
Thanks in advance.
Best,
Edward Chen
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.