bugra9 / gdal3.js

Convert raster and vector geospatial data to various formats and coordinate systems entirely in the browser.
https://gdal3.js.org
GNU Lesser General Public License v2.1
311 stars 46 forks source link

Error reading file with JS vanilla #80

Closed IngenieroGeomatico closed 1 month ago

IngenieroGeomatico commented 1 month ago

Hi.

I am using the library to implement a WEB cartographic application, and for testing, I am using this code:

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gdal3.js@2.8.1/dist/package/gdal3.js"
    integrity="sha384-yW4c2Jx7lsREjJg58+ZI5U6gAso2bRAPw3LdzPWm7z8+rMJ24R7AS+EFyXDPxgYM"
    crossorigin="anonymous">
   </script>

    ....

     initGdalJs({ path: 'https://cdn.jsdelivr.net/npm/gdal3.js@2.8.1/dist/package', useWorker: false }).then((Gdal) => {

        const count = Object.keys(Gdal.drivers.raster).length + Object.keys(Gdal.drivers.vector).length;
        console.log(Gdal.drivers);

        Gdal.open(['/vsicurl/https://gist.githubusercontent.com/wavded/1200773/raw/e122cf709898c09758aecfef349964a8d73a83f3/sample.json']).then((dataset) => {
            const data = dataset.datasets[0]
            console.log('data:   ',data)

            Gdal.ogrinfo(data).then((info)=>{
                console.log(info)
            });

        });

    });

but it gives me the following error:

TypeError: t.arrayBuffer is not a function

Thanks forward.

mthh commented 1 month ago

I don't think that vsicurl is supported, but you can download the file and open it with gdal3.js; the library author gives an example here in which he saves the file in the Emscripten FileSystem before opening it: https://github.com/bugra9/gdal3.js/issues/67#issuecomment-1925312612.

IngenieroGeomatico commented 1 month ago

Brilliant! Thank you very much, it worked perfectly!

I share the code that has worked for me:

    fetch('https://gist.githubusercontent.com/wavded/1200773/raw/e122cf709898c09758aecfef349964a8d73a83f3/sample.json').then( (response) => {
        // response = response.text()
        response = response.arrayBuffer()
        return response
    })
    .then((response)=>{

        console.log('response: ', response)

        initGdalJs({ path: 'https://cdn.jsdelivr.net/npm/gdal3.js@2.8.1/dist/package', useWorker: false })
        .then((Gdal) => {
            const count = Object.keys(Gdal.drivers.raster).length + Object.keys(Gdal.drivers.vector).length;

            console.log('----------------')
            console.log('GDAL-OGR drivers')
            console.log(Gdal.drivers);
            console.log('----------------')

            if(url.includes('zip' )){
                Gdal.Module.FS.writeFile('/input/file.zip', new Int8Array(response) );
                dataset = Gdal.open('/input/file.zip',[],['vsizip'])
                return Promise.all([dataset, Gdal])

            }
            else{
                Gdal.Module.FS.writeFile('/input/file.file', new Int8Array(response) );
                dataset = Gdal.open('/input/file.file')
                return Promise.all([dataset, Gdal])
            }

        })
        .then((values) => {
            dataset = values[0]
            Gdal = values[1]
            console.log('dataset: ',dataset)
            console.log('dataset: ',dataset.datasets[0])
            dataLayer = dataset.datasets[0]
            return Promise.all([dataLayer, Gdal])
        })
        .then((values)=>{
            dataLayer = values[0]
            Gdal = values[1]
            info = Gdal.ogrinfo(dataLayer,['-features','-geom=YES'])
            return Promise.all([info, Gdal])
        })
        .then((values)=>{
            info = values[0]
            Gdal = values[1]
            console.log(info)
        });
    })