- Notifications
You must be signed in to change notification settings - Fork80
GeoPackage JavaScript Library
License
NotificationsYou must be signed in to change notification settings
ngageoint/geopackage-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
GeoPackage JS is an implementation of the OGC GeoPackage spec. This library works in both the browser and Node 12+.
Cloning this repository and opening the docs/index.html in your browser will run the demo locally.
$ npm install @ngageoint/geopackage
TheGeoPackage Libraries were developed at theNational Geospatial-Intelligence Agency (NGA) in collaboration withBIT Systems. The government has "unlimited rights" and is releasing this software to increase the impact of government investments by providing developers with the opportunity to take things in new directions. The software use, modification, and distribution rights are stipulated within theMIT license.
If you'd like to contribute to this project, please make a pull request. We'll review the pull request and discuss the changes. All pull request contributions to this project will be released under the MIT license.
Software source code previously released under an open source license and then modified by NGA staff is considered a "joint work" (see 17 USC § 101); it is partially copyrighted, partially public domain, and as a whole is protected by the copyrights of the non-government authors and must be released according to the terms of the original open source license.
GeoPackage JS is aGeoPackage Library JavaScript implementation of the Open Geospatial ConsortiumGeoPackagespec. It is listed as anOGC GeoPackage Implementation by the National Geospatial-Intelligence Agency.
The GeoPackage JavaScript library currently provides the ability to read GeoPackage files. This library works both in the browser and in Node. In the browser tiles are rendered using HTML5 Canvas and GeoPackages are read usingsql.js. In Node tiles are renderedPureImage and GeoPackages are read usingnode-sqlite3.
View the latestdocs.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Test</title><scriptsrc="/path/to/geopackage.min.js"></script></head><body><inputid="fileInput"type="file"/><scriptsrc="./index.js"></script></body></html>
// Specify folder containing the sql-wasm.wasm file.// By default, geopackage loads from https://server/public/sql-wasm.wasmconst{ GeoPackageManager, Canvas, TileUtils, GeoPackageTileRetriever, FeatureTiles, FeatureIndexManager, BoundingBox, setSqljsWasmLocateFile}=window.GeoPackagesetSqljsWasmLocateFile(file=>'public/'+file);// attach an event listener onto a file inputdocument.getElementById('fileInput').addEventListener('change',function(){constfile=this.files[0];constfileReader=newFileReader();fileReader.onload=function(){loadByteArray(newUint8Array(fileReader.result));}fileReader.readAsArrayBuffer(file);},false);functionloadByteArray(array){GeoPackageManager.open(array).then(async(geoPackage)=>{// get the tile table namesconsttileTables=geoPackage.getTileTables();for(leti=0;i<tileTables.length;i++){consttable=tileTables[i];// get tile daoconsttileDao=geoPackage.getTileDao(table);// get table infoconsttableInfo=geoPackage.getInfoForTable(tileDao);// Get a GeoPackageTile and then draw it into a canvas.constcanvas=Canvas.create(TileUtils.TILE_PIXELS_DEFAULT,TileUtils.TILE_PIXELS_DEFAULT);constcontext=canvas.getContext('2d');constgpr=newGeoPackageTileRetriever(tileDao);constx=0;consty=0;constzoom=0;// Get the GeoPackageTile for a particular web mercator tileconstgeoPackageTile=awaitgpr.getTile(x,y,zoom)// get the tile data as a BufferlettileData=geoPackageTile.getData();// Get the GeoPackageImage from the GeoPackageTileconstgeoPackageImage=awaitgeoPackageTile.getGeoPackageImage()// draw the tile and use the canvas to get the Data URLcontext.drawImage(geoPackageImage.getImage(),0,0);constbase64String=canvas.toDataURL('image/png');// In node.js, users must dispose of any GeoPackageImage and Canvas created to prevent memory leaksCanvas.disposeImage(geoPackageImage);Canvas.disposeCanvas(canvas);// Query tile table directly.consttileRow=tileDao.queryForTile(x,y,zoom);tileData=tileRow.getTileData();// the raw bytes from the GeoPackage}// get the feature table namesconstfeatureTables=geoPackage.getFeatureTables();for(leti=0;i<featureTables.length;i++){consttable=featureTables[i];// get the feature daoconstfeatureDao=geoPackage.getFeatureDao(table);// get the info for the tableconsttableInfo=geoPackage.getInfoForTable(featureDao);// draw tiles using featuresconstcanvas=Canvas.create(TileUtils.TILE_PIXELS_DEFAULT,TileUtils.TILE_PIXELS_DEFAULT);constcontext=canvas.getContext('2d');constft=newFeatureTiles(geoPackage,featureDao);varx=0;vary=0;varzoom=0;constgeoPackageImage=awaitft.drawTile(x,y,zoom);context.drawImage(geoPackageImage.getImage(),0,0);constbase64String=canvas.toDataURL('image/png');Canvas.disposeImage(geoPackageImage);Canvas.disposeCanvas(canvas);// iterate over indexed features that intersect the bounding boxconstfeatureIndexManager=newFeatureIndexManager(geoPackage,table);constresultSet=featureIndexManager.query();for(constfeatureRowofresultSet){// ...}resultSet.close();// iterate over all features in a table in the geojson formatconstgeoJSONResultSet=geoPackage.queryForGeoJSONFeatures(table);for(constfeatureofgeoJSONResultSet){// ...}geoJSONResultSet.close();}}).catch(function(error){console.error(error);});}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Test</title><scriptsrc="/path/to/geopackage.min.js"></script></head><body><inputid="fileInput"type="file"onchange="openConnection(this.files)"/><canvasid="canvas"width="256px"height="256px"></canvas><br><inputid="table"type="text">Table:</input><br><inputid="column"type="number">X:</input><br><inputid="row"type="number">Y:</input><br><inputid="zoom"type="number">Zoom:</input><br><buttononclick="drawFeatureTileInCanvas(document.getElementById('table').value, document.getElementById('column').value, document.getElementById('row').value, document.getElementById('zoom').value)">GetFeatureTile</button><br><buttononclick="drawTileInCanvas(document.getElementById('table').value, document.getElementById('column').value, document.getElementById('row').value, document.getElementById('zoom').value)">DrawTileInCanvas</button><br><buttononclick="getFeatureTableAsGeoJSON(document.getElementById('table').value)">GetFeatureTableAsGeoJSON</button><br><buttononclick="closeConnection()">Close</button><br><scriptsrc="./index.js"></script></body></html>
// canvas for drawing, will need to be defined in html file.varcanvas=document.getElementById('canvas');// setup workervargeopackageWorker;if(window.Worker){geopackageWorker=newWorker("worker.js");// handle responses from the geopackage web workergeopackageWorker.onmessage=function(e){// draw tileif(e.data.type==='tile'){constctx=canvas.getContext('2d');ctx.putImageData(e.data.tileImageData,0,0);// print geojson}elseif(e.data.type==='geojson'){console.log(e.data.geojson)}}}/** * Attach this method to a file input onchange event to open a geopackage connection * files[0] should be a valid .gpkg file *@param files - event.target.files */openConnection=function(files){varf=files[0];varr=newFileReader();r.onload=function(){vararray=newUint8Array(r.result);// create a connection to the geopackagegeopackageWorker.postMessage({type:'load',file:array});}r.readAsArrayBuffer(f);}/** * Closes the geopackage connection inside the worker */closeConnection=function(){geopackageWorker.postMessage({type:'close',});}/** * Will request the x,y,z feature tile to be drawn *@param table *@param x *@param y *@param z */drawFeatureTileInCanvas=function(table,x,y,z){console.log([table,x,y,z]);geopackageWorker.postMessage({type:'get-feature-tile',table:table,x:x,y:y,z:z,width:canvas.width,height:canvas.height});}/** * Will request the x,y,z file to be drawn *@param table *@param x *@param y *@param z */drawTileInCanvas=function(table,x,y,z){geopackageWorker.postMessage({type:'get-tile',table:table,x:x,y:y,z:z,width:canvas.width,height:canvas.height});}/** * Will request the features of a table in geojson format *@param table */getFeatureTableAsGeoJSON=function(table){geopackageWorker.postMessage({type:'get-geojson',table:table});}
// import the geopackage browser libraryself.importScripts('/path/to/geopackage.min.js');const{ GeoPackageManager, Canvas, TileUtils, GeoPackageTileRetriever, FeatureTiles, BoundingBox, setSqljsWasmLocateFile}=GeoPackage;// specify the location of the sql.wasm filesetSqljsWasmLocateFile(file=>'public/'+file);// message listeneronmessage=function(e){// open geopackage connection to fileData provided in messageif(e.data.type==='load'){GeoPackageManager.open(e.data.file).then(gp=>{self.gp=gp;});// close the geopackage connection}elseif(e.data.type==='close'){self.gp.close();// request a tile from a feature table}elseif(e.data.type==='get-feature-tile'){consttable=e.data.table;constx=parseInt(e.data.x);consty=parseInt(e.data.y);constz=parseInt(e.data.z);constwidth=parseInt(e.data.width);constheight=parseInt(e.data.height);constfeatureDao=self.gp.getFeatureDao(table);constft=newFeatureTiles(self.gp,featureDao,width,height);ft.drawTile(x,y,z).then(tile=>{postMessage({type:'tile',tileImageData:tile.getImageData()});});// request a tile from a tile table}elseif(e.data.type==='get-tile'){consttable=e.data.table;constx=parseInt(e.data.x);consty=parseInt(e.data.y);constz=parseInt(e.data.z);constwidth=parseInt(e.data.width);constheight=parseInt(e.data.height);self.gp.xyzTile(table,x,y,z,width,height).then(gpTile=>{gpTile.getGeoPackageImage().then(gpImage=>{postMessage({type:'tile',tileImageData:gpImage.getImageData()});})})// request the features from a feature table in geojson format}elseif(e.data.type==='get-geojson'){consttable=e.data.table;constfeatures=[];constfeatureResultSet=self.gp.queryForGeoJSONFeatures(table);for(constfeatureoffeatureResultSet){features.push(feature);}featureResultSet.close();constfeatureCollection={type:'FeatureCollection',features:features}postMessage({type:'geojson',geojson:featureCollection});}}
const{ setCanvasKitWasmLocateFile, GeoPackageManager, GeoPackageTileRetriever, FeatureTiles, Canvas, FeatureIndexManager, BoundingBox, TileUtils}=require('@ngageoint/geopackage');const{ Projections}=require('@ngageoint/projections-js')const{ GeometryType}=require('@ngageoint/simple-features-js')// specify the CanvasKit WebAssembly module's location.setCanvasKitWasmLocateFile(file=>'/path/to/node_modules/@ngageoint/geopackage/dist/canvaskit/'+file);// open the .gpkg fileGeoPackageManager.open('/path/to/file.gpkg').then(async(geoPackage)=>{// get the tile table namesconsttileTables=geoPackage.getTileTables();for(leti=0;i<tileTables.length;i++){consttable=tileTables[i];// get tile daoconsttileDao=geoPackage.getTileDao(table);// get table infoconsttableInfo=geoPackage.getInfoForTable(tileDao);// Get a GeoPackageTile and then draw it into a canvas.constcanvas=Canvas.create(TileUtils.TILE_PIXELS_DEFAULT,TileUtils.TILE_PIXELS_DEFAULT);constcontext=canvas.getContext('2d');constgpr=newGeoPackageTileRetriever(tileDao);constx=0;consty=0;constzoom=0;// Get the GeoPackageTile for a particular web mercator tileconstgeoPackageTile=awaitgpr.getTile(x,y,zoom)// get the tile data as a BufferlettileData=geoPackageTile.getData();// Get the GeoPackageImage from the GeoPackageTileconstgeoPackageImage=awaitgeoPackageTile.getGeoPackageImage()// draw the tile and use the canvas to get the Data URLcontext.drawImage(geoPackageImage.getImage(),0,0);constbase64String=canvas.toDataURL('image/png');// In node.js, users must dispose of any GeoPackageImage and Canvas created to prevent memory leaksCanvas.disposeImage(geoPackageImage);Canvas.disposeCanvas(canvas);// Query tile table directly.consttileRow=tileDao.queryForTile(x,y,zoom);tileData=tileRow.getTileData();// the raw bytes from the GeoPackage}// get the feature table namesconstfeatureTables=geoPackage.getFeatureTables();for(leti=0;i<featureTables.length;i++){consttable=featureTables[i];// get the feature daoconstfeatureDao=geoPackage.getFeatureDao(table);// get the info for the tableconsttableInfo=geoPackage.getInfoForTable(featureDao);// draw tiles using featuresconstcanvas=Canvas.create(TileUtils.TILE_PIXELS_DEFAULT,TileUtils.TILE_PIXELS_DEFAULT);constcontext=canvas.getContext('2d');constft=newFeatureTiles(geoPackage,featureDao);varx=0;vary=0;varzoom=0;constgeoPackageImage=awaitft.drawTile(x,y,zoom);context.drawImage(geoPackageImage.getImage(),0,0);// canvas.toDataURL('image/png'));Canvas.disposeImage(geoPackageImage);Canvas.disposeCanvas(canvas);// iterate over indexed features that intersect the bounding boxconstfeatureIndexManager=newFeatureIndexManager(geoPackage,table);constresultSet=featureIndexManager.queryWithBoundingBoxAndProjection(newBoundingBox(0,-90,180,90),Projections.getWGS84Projection());for(constfeatureRowofresultSet){// ...}resultSet.close();// iterate over all features in a table in the geojson formatconstgeoJSONResultSet=geoPackage.queryForGeoJSONFeatures(table);for(constfeatureofgeoJSONResultSet){// ...}geoJSONResultSet.close();}});
About
GeoPackage JavaScript Library
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published