tentone / geo-three

Tile based geographic world map visualization library for threejs
https://tentone.github.io/geo-three/docs/
MIT License
657 stars 105 forks source link

question : custom provider ? #2

Closed arthurmougin closed 3 years ago

arthurmougin commented 3 years ago

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?

tentone commented 3 years ago

Hello

You have a complete example in the readme of the project of how to implement the Provider interface.

For example for a open street maps serve would be something like:

export class OpenStreetMapsProvider extends 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://a.tile.openstreetmap.org/" + zoom + "/" + x + "/" + y + ".png";
        });
    }
}

For the provider you have just sent its just a matter of replacing the openstreet maps API URL with the API URL. You have of course to fill the URL parameter accordingly.

https://wxs.ign.fr/jhyvi0fgmnuxvfv0zjzorvdn/geoportail/wmts?gp-ol-ext=3.0.11&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=17&TileCol=66420&TileRow=45095

arthurmougin commented 3 years ago

Thank you for your quick answer, helped a lot!